<script>


    import {localePath} from "$lib/config/localePath.js";
    // import Menu from "svelte-material-icons/Menu.svelte"
    // import { Menu } from "@iconify/svelte";
    import Icon from "@iconify/svelte";
    import MobileNav from "$lib/components/shared/MobileNav.svelte";
    import {fade, fly, slide, scale} from 'svelte/transition'
    import {onMount} from 'svelte';


    import {t, locale} from '$lib/translations';

    import {writable} from "svelte/store";
    let openMobileMenu = writable(false);


    function menu() {
        $openMobileMenu = !$openMobileMenu;

    }


    let sticky = false;

    onMount(() => {
        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    });

    function handleScroll() {
        const scrollY = window.scrollY;

        // Adjust the threshold value based on when you want the navbar to become sticky
        sticky = scrollY > 100;
    }


</script>


<section class="relative">


    <nav class="nav w-full bg-sky-500 {sticky ? 'sticky' : ''}" id="nav">

        <div class="max-w-6xl flex flex-row justify-between lg:justify-start  m-auto py-1 md:space-x-12 px-4 lg:px-0">

            <div class="logo">


                <a href="/{$locale}">
                    <img src="/logo.png" alt="" class="h-10 md:h-12">
                </a>

            </div>

            <div class="flex flex-row-reverse justify-stretch items-center lg:hidden ml-0 ">
                <button on:click={menu} class="flex flex-row  text-white justify-center items-center ">
                    <span class="rtl:hidden pt-1">MENU</span>
                    <!-- <Menu color="white" size="30"/> -->
                    <Icon icon="mdi:menu" size="30" class="text-white"/>
                </button>

            </div>



            {#if $openMobileMenu}
                <MobileNav {openMobileMenu} {menu}/>
            {/if}

            <div class="menu hidden lg:flex items-center text-white">
                <ul class="flex flex-row items-center space-x-8  uppercase font-bold ltr:tracking-widest	">

                    <li class="group text-center  rtl:mr-7">
                        <a href="{localePath($locale,'/')}"
                           class="group-hover:border-b-2  pb-1  transition-border  duration-100  ">
                            { $t('common.home') }
                        </a>
                    </li>

                    <li class="group rtl:pr-8">

                        <a href="{localePath($locale,'/about')}"
                           class="group-hover:border-b-2  pb-1  transition-border duration-100">
                            { $t('common.about-acb') }
                        </a>


                    </li>
                    <li class="group relative">
                        <div>

                            <a href="{localePath($locale,'/matches/international')}"
                               class="  transition-border duration-100 pb-5">
                                {$t('common.matches')}
                            </a>

                            <div in:fade={{ duration: 300, delay: 0 }}
                                 class="absolute  hidden group-hover:flex mt-3 z-20 bg-sky-600 w-40 px-2 dropdown left-[-50px] rounded transition duration-100 before:top-[-20px] before:left-[70px]">

                                <ul class="flex flex-col space-y-4 py-4  text-sm px-2">
                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="{localePath($locale,'/matches/international')}">
                                            {$t('common.international')}
                                        </a>
                                    </li>
                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="{localePath($locale,'/matches/domestic')}">
                                            {$t('common.domestic')}
                                        </a>

                                    </li>


                                </ul>
                            </div>
                        </div>


                    </li>

                    <li class="group relative ">
                        <div class=" ">

                            <a href="/media/latest-news" class=" pb-5">
                                {$t('common.media')}
                            </a>


                            <div in:fade={{ duration: 300, delay: 0 }}
                                 class="absolute  hidden group-hover:flex mt-3 z-20 bg-sky-600 w-40 px-2 dropdown left-[-50px] rounded transition duration-100 before:top-[-20px] before:left-[65px]">

                                <ul class="flex flex-col space-y-4 py-4  text-sm px-2">

                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="/media/press-release">

                                            {$t('common.press-release')}
                                        </a>
                                    </li>

                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="/media/latest-news">

                                            {$t('common.news')}
                                        </a>

                                    </li>
                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="/media/magazine">
                                            {$t('common.magazines')}
                                        </a>

                                    </li>
                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="/media/match-report">
                                            {$t('common.match-report')}
                                        </a>

                                    </li>
                                    <li class="hover:text-gray-300 transition duration-100">
                                        <a href="/media/video">
                                            {$t('common.video')}
                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>


                    </li>

                    <li class="group">
                        <a href="/" class="group-hover:border-b-2  pb-1  transition-border duration-100">
                            {$t('common.players')}
                        </a>


                    </li>
                    <li class="group">
                        <a href="/" class="group-hover:border-b-2  pb-1  transition-border duration-100">
                            {$t('common.development')}
                        </a>


                    </li>
                    <li class="group">
                        <a href="/" class="group-hover:border-b-2  pb-1  transition-border duration-100">
                            {$t('common.opportunities')}
                        </a>


                    </li>

                </ul>
            </div>
        </div>


    </nav>
</section>
<style>

    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 49;

    }


    .dropdown::before {
        position: absolute;
        /*top: -20px;*/
        /*left: 65px;*/
        height: 0;
        width: 0;
        transform: rotate(360deg);
        content: " ";
        pointer-events: none;
        border-width: 0.625rem;
        border-color: rgba(80, 132, 196, 0);
        border-bottom-color: #5084C4;

    }
</style>