{{#
	@name Main desktop navigation
	@desc The sites main desktop navigation rendered on each page. It's 2 levels deep by default and uses AlpineJS for interactivity.
#}}

<!-- /navigation/_main_desktop.antlers.html -->
<nav class="hidden md:block">
    <ul class="flex items-center space-x-8">
        {{ nav:main max_depth="2" include_home="true" }}
            <li
                {{ if children }}
                    x-data="{ subnavOpen: false }"
                    @keyup.escape.window="subnavOpen = false"
                    x-cloak
                {{ /if }}
                class="relative leading-none"
            >
                <a
                    class="
                        p-1 flex items-center font-bold text-base  tracking-wide hover:text-primary focus:outline-none focus-visible:ring-2 ring-primary gilroy border-b-4 block
                        {{ is_current || is_parent
                            ? 'text-primary  border-b-primary'
                            : 'text-neutral' }}
                    "
                    {{ if children }}
                        href="#"
                        @click.prevent="subnavOpen = !subnavOpen"
                        :aria-label="subnavOpen
                            ? '{{ trans:strings.subnav_close }}'
                            : '{{ trans:strings.subnav_open }}'"
                        :aria-expanded="subnavOpen"
                    {{ else }}
                        href="{{ url }}"
                    {{ /if }}
                >
                    {{ title }}
                    {{ if children }}
                        <svg class="w-2 ml-1 overflow-visible stroke-current text-neutral"
                            :class="{ 'rotate-180': subnavOpen }"
                            aria-hidden="true"
                            stroke-width="16"
                            viewBox="0 0 140 140"><path d="M135.625 42.648l-62.533 62.527a4.37 4.37 0 01-6.184 0L4.375 42.648" fill="none" stroke-linecap="round" stroke-linejoin="round"
                        /></svg>
                    {{ /if }}
                </a>
                {{ if children }}
                    <ul
                        x-show="subnavOpen"
                        x-trap="subnavOpen"
                        class="absolute mt-2 -ml-3 py-2 px-3 bg-white border border-neutral/10 rounded shadow"
                        @click.outside="subnavOpen = false"
                        x-transition
                    >
                        {{ children }}
                            <li class="">
                                <a
                                    class="
                                        whitespace-nowrap py-2 px-1 -mx-1 block text-xs font-bold hover:text-primary focus:outline-none focus-visible:ring-2 ring-primary
                                        {{ is_current || is_parent
                                            ? 'text-primary'
                                            : 'text-neutral' }}
                                    "
                                    href="{{ url }}"
                                >
                                    {{ title }}
                                </a>
                            </li>
                        {{ /children }}
                    </ul>
                {{ /if }}
            </li>
        {{ /nav:main }}
    </ul>
</nav>
<!-- End: /navigation/_main_desktop.antlers.html -->