{{--  backdrop-blur --}}

<style>
    .menuHamburger {
        display: none;
    }
    .mobileOffcanvas{
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 99999;
        width: 100%;
        background-color: rgba(0,0,0, .4);
    }
    .navMobMenu {
        display: flex;
        flex-direction: column;
        width: 327px;
        padding: 92px 12px 12px;
        gap: 20px;
        background-color: #000001;
        height: 100%;
    }
    
    .navMobMenu li ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        left: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        transition: none;
        background: rgba(0, 0, 0, .95);
        padding: 25px 8px 25px 8px;
        min-width: 200px;
    }
.navMob {
	display: none;
}
    @media (max-width: 1023px){
        #header{
            padding-top: 12px;
        }
        .menuHamburger {
            display: block;
            background-color: #FFFFFF!important;
            background-image: none;
            width: auto;
            padding: 0 12px;
        }
        .navMob, .nav {
            display: none;
        }
        .mobiled{
            flex-wrap: nowrap;
            width: 100%;
            padding-left: 12px;
            padding-right: 12px;
        }
    }
</style>

<header id="header" x-data="{ openHeader: false }"  class="w-full fixed top-0 left-0 h-auto z-[9999] shadow-md backdrop-blur bg-[#191919]">
    <div class="w-[1160px] mobiled mx-auto flex items-center gap-4 justify-between">
        <div>
            <a href="/" wire:navigate class="block w-16 h-16">
                <x-application-logo class="w-full h-full text-gray-500" />
            </a>
	</div>
	
        
        <button class="menuHamburger" id="menuHamburger">
            <span style="display: inline-flex;">
                <!-- category: System
                    tags: [bars, hamburger, navigation, burger]
                    version: "1.11"
                    unicode: "ec42"
                -->
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
                  <path d="M4 6l16 0" />
                  <path d="M4 12l16 0" />
                  <path d="M4 18l16 0" />
                </svg>
            </span>
        </button>

        <ul class="nav">

            <li>
                <a href="/">{{ __("Home") }}</a>
            </li>

            <li>
                <a href="https://discord.gg/kpJtpQ7SG8">Discord</a>
            </li>

            <li class="sub-menu">
                <a href="#">{{ __("info") }}</a>
                <ul class="">
                    <li><a href="{{ route('server.information') }}">{{ __("server_info") }}</a></li>
                    <li><a href="{{ route('server.server-update') }}">{{ __("server_update") }}</a></li>
                </ul>
            </li>

            <li class="sub-menu">
                <a href="#">{{ __("caracteristique") }}</a>
                <ul class="">
                    <li><a href="{{ route('game.content') }}">{{ __("game_content") }}</a></li>
                    <li><a href="{{ route('alya.style') }}">{{ __("alya_style") }}</a></li>
                </ul>
            </li>

            <li class="sub-menu">
                <a href="#">{{ __('MY_ACCOUNT') }}</a>
                <ul class="">
                    @auth
                        <li><a href="{{ route("my.account") }}">{{ __('Profile') }}</a></li>
                        <li><a href="{{ route('donation') }}" class="">Donation</a></li>
                        <li>
                            <!-- Authentication -->
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf

                                <x-dropdown-link :href="route('logout')"
                                        onclick="event.preventDefault();
                                                    this.closest('form').submit();">
                                    {{ __('Log Out') }}
                                </x-dropdown-link>
                            </form>
                        </li>
                    @else
                        <li><a href="{{ route('register') }}">{{ __("Register") }}</a></li>
                        <li><a href="{{ route('login') }}">{{ __("Login") }}</a></li>
                    @endauth
                </ul>
            </li>

            <li>
                <a href="https://www.rotopserv.net/serveurs/alyaro/vote">Voter</a>
            </li>

            <li class="hidden" style="display: none!important;">
                <a href="#">{{ __('lang.language') }}</a>
                <ul class="flex flex-col gap-1 justify-center">
                    <li><button class="" onclick="setLang('fr')">{{ __('lang.fr') }}</button></li>
                    <li><button class="" onclick="setLang('en')">{{ __('lang.en') }}</button></li>
                </ul>
            </li>

	</ul>
	
        <div class="navMob" id="mobileOffcanvas">
            
            <ul class="navMobMenu">
    
                <li>
                    <a href="/">{{ __("Home") }}</a>
                </li>
    
                <li>
                    <a href="https://discord.gg/kpJtpQ7SG8">Discord</a>
                </li>
    
                <li class="sub-menu">
                    <a href="#">{{ __("info") }}</a>
                    <ul class="">
                        <li><a href="{{ route('server.information') }}">{{ __("server_info") }}</a></li>
                        <li><a href="{{ route('server.server-update') }}">{{ __("server_update") }}</a></li>
                    </ul>
                </li>
    
                <li class="sub-menu">
                    <a href="#">{{ __("caracteristique") }}</a>
                    <ul class="">
                        <li><a href="{{ route('game.content') }}">{{ __("game_content") }}</a></li>
                        <li><a href="{{ route('alya.style') }}">{{ __("alya_style") }}</a></li>
                    </ul>
                </li>
    
                <li class="sub-menu">
                    <a href="#">{{ __('MY_ACCOUNT') }}</a>
                    <ul class="">
                        @auth
                            <li><a href="{{ route("my.account") }}">{{ __('Profile') }}</a></li>
                            <li><a href="#" class="">Donation</a></li>
                            <li>
                                <!-- Authentication -->
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
    
                                    <x-dropdown-link :href="route('logout')"
                                            onclick="event.preventDefault();
                                                        this.closest('form').submit();">
                                        {{ __('Log Out') }}
                                    </x-dropdown-link>
                                </form>
                            </li>
                        @else
                            <li><a href="{{ route('register') }}">{{ __("Register") }}</a></li>
                            <li><a href="{{ route('login') }}">{{ __("Login") }}</a></li>
                        @endauth
                    </ul>
                </li>
    
                <li>
                    <a href="https://www.rotopserv.net/serveurs/alyaro/vote">Voter</a>
                </li>
    
            </ul>
	    
            <div class="closeMenu" id="closeMenu" style="background-color: #FFFFFF;border-radius: 12px;height: 40px;width: 50px;position: absolute;right: 20px;top: 32px; display: flex;justify-content: center; align-items: center;">
                <span style="display: inline-flex;">
                    <!-- category: System
                        tags: [cancel, remove, delete, empty, close]
                        version: "1.0"
                        unicode: "eb55"
                    -->
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="#ff0000"
                      stroke-width="3"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path d="M18 6l-12 12" />
                      <path d="M6 6l12 12" />
                    </svg>

                </span>
            </div>
            

        </div>

    </div>

</header>