{{#
	@name Main mobile navigation
	@desc The site's main mobile navigation rendered on each page. It uses AlpineJS for interactivity.
#}}

<!-- /layout/navigation/_main_mobile.antlers.html -->
<nav
    x-data="{ mobileNavOpen: false }"
    aria-label="{{ trans:strings.main_navigation }}"
    @resize.window="mobileNavOpen = false"
    @click.away="mobileNavOpen = false"
    x-on:keydown.escape="mobileNavOpen = false"
    x-cloak
    class="sm:hidden isolate"
>

    <div class="-mr-2">
        <button
            @click.prevent="mobileNavOpen = !mobileNavOpen"
            class="inline-flex items-center justify-center p-2 rounded motion-safe:transition focus:outline-none"
            :class="{'text-white hover:bg-white/10 hover:ring-1 hover:ring-white focus-visible:bg-white/10 focus-visible:ring-1 focus-visible:ring-white': mobileNavOpen, 'hover:bg-gray-100 hover:ring-1 hover:ring-black focus-visible:bg-gray-100 focus-visible:ring-1 focus-visible:ring-black': !mobileNavOpen }"
            :aria-label="mobileNavOpen ? '{{ trans:strings.nav_close }}' : '{{ trans:strings.nav_open }}'"
            :aria-expanded="mobileNavOpen"
        >
            <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path :class="{'hidden': mobileNavOpen, 'inline-flex': !mobileNavOpen }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                <path :class="{'hidden': !mobileNavOpen, 'inline-flex': mobileNavOpen }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <div
        x-show="mobileNavOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-1"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-1"
        x-trap.inert.noscroll="mobileNavOpen"
        class="absolute inset-x-0 top-0 flex justify-end -z-10"
    >
        <ul class="flex flex-col items-start pl-6 pr-16 pt-14 pb-7 gap-y-4 bg-black mobile-nav">
            {{ nav:main max_depth="0" select="title|permalink|cta|children" }}
                <li class="-mx-3">
                    <a
                        class="
                            inline-flex items-center px-3 py-2  font-medium text-white select-none gap-x-1 motion-safe:transition focus:outline-none
                            {{ cta
                                ? 'text-white text-base rounded-full ring-1 ring-white/20 bg-white/10 px-4 py-1.5 group hover:bg-white/10 focus-visible:ring-1 focus-visible:bg-white/10 focus-visible:ring-white'
                                : 'rounded hover:line-through text-lg focus-visible:rounded focus-visible:ring-1 focus-visible:bg-white/10 focus-visible:ring-white'
                             }}
                        "
                        href="{{ permalink }}"
                        @click="mobileNavOpen = false"
                    >
                        {{ title }}

                        {{ if cta }}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="transition size-4 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5 -mr-0.5">
                                <path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd" />
                            </svg>
                        {{ /if }}
                    </a>
                </li>

                {{ if children }}
                    {{ children }}
                    <li class="-mx-3">
                        <a href="{{ permalink }}" class="
                                            inline-flex items-center px-3 py-2  font-medium text-white select-none gap-x-1 motion-safe:transition focus:outline-none
                            {{ cta
                                ? 'text-white text-base rounded-full ring-1 ring-white/20 bg-white/10 px-4 py-1.5 group hover:bg-white/10 focus-visible:ring-1 focus-visible:bg-white/10 focus-visible:ring-white'
                                : 'rounded hover:line-through text-lg focus-visible:rounded focus-visible:ring-1 focus-visible:bg-white/10 focus-visible:ring-white'
                             }}
                                        ">
                            &nbsp;&nbsp; > {{ title }}
                            {{ if cta }}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="transition size-4 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5 -mr-0.5">
                                <path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd" />
                            </svg>
                            {{ /if }}
                        </a>
                    </li>
                    {{ /children }}
                {{ /if }}


            {{ /nav:main }}
        </ul>
    </div>

</nav>
<!-- End: /layout/navigation/_main_mobile.antlers.html -->