Navigation

{% set activeClass = "" %}
{% set hoverClass = "" %}
{% set underlineClass = "lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-0.5 lg:after:bottom-1 lg:after:bg-button-2-surface" %}

<div class="items-center flex lg:hidden gap-2 mr-2">
    <div class="flex items-center">
        {% render "@search-button" %}
    </div>

        
            <button class="js-mobile-second-level-trigger-forward hidden lg:flex items-center justify-center gap-2 bg-button-surface text-bkg text-base font-bold rounded-lg uppercase hover:bg-button-surface-hover transition duration-300 ease-in-out w-8 h-8"
                aria-expanded="false"
                aria-controls="mega-menu-account"
                aria-haspopup="true"
                type="button">
                <span class="sr-only">
                    Open My account menu
                </span>
                <span class="h-4 w-4">
                    {% render "@icon", { name: "icon-user", modifier: "w-full h-full fill-current", ariaHidden: true } %}
                </span>
            </button>
        
            <a href="./sign-in.html" class="flex items-center justify-center gap-2 bg-button-surface text-bkg text-base font-bold rounded-lg uppercase hover:bg-button-surface-hover transition duration-300 ease-in-out w-8 h-8">
                <span class="sr-only">
                    Log in
                </span>
                <span class="h-4 w-4">
                    {% render "@icon", { name: "icon-user", modifier: "w-full h-full fill-current", ariaHidden: true } %}
                </span>
            </a>
        
 </div>

{% render "@mobile-menu-toggle-button" %}

<nav id="menu" data-vanilla-module="Menu" class="items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 bg-bkg w-full lg:h-full lg:flex lg:bg-transparent lg:static lg:p-0 lg:left-auto lg:w-auto">
    <div class="overflow-y-auto lg:overflow-visible h-full js-menu-overlay">
        <ul class="bg-bkg overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-end lg:overflow-visible">
            {% for item in navItems %}
                <li class="js-menu-item lg:pr-6 2xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-end group {% if item.singleList %}lg:relative{% endif %}">
                    <a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-lg lg:self-end {{underlineClass}} {{ hoverClass }} {% if pageTitle == item.menu_item %}{{ activeClass }}{% else %}lg:after:opacity-0{% endif %} " href="{{ item.url | path }}">{{item.menu_item}}
                        {% if item.megaList or item.singleList %}
                            <div class="hidden lg:block h-3 w-3 ml-2 transition-transform duration-300 ease-in-out">
                                {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-button-2-surface rotate-90 group-hover:-rotate-90 transition-transform duration-300 ease-in-out', ariaHidden: true } %}
                            </div>
                        {% endif %}
                    </a>
                    {% if item.megaList or item.singleList %}
                       <button class="js-mobile-second-level-trigger-forward transition lg:hidden p-4 border-l border-button-2-surface/50" aria-expanded="false" aria-controls="mega-menu-{{loop.index}}" aria-haspopup="true">
                            <span class="sr-only">
                                Open Second Level
                            </span>
                            <div class="h-6 w-6">
                                {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-button-2-surface transform', ariaHidden: true } %}
                            </div>
                        </button>
                    {% endif %}
                    {% if item.megaList %}
                        {% render "@mega-dropdown", { megaList: item.megaList, heading: item.menu_item, megaIndex: loop.index } %}
                    {% elseif item.singleList %}
                        {% render "@single-dropdown", { list: item.singleList, heading: item.menu_item, megaIndex: loop.index } %}
                    {% endif %}
                </li>
            {% endfor %}            

            {% if loggedIn and accountNavItem %}
                <li class="lg:hidden border-t border-button-2-surface/20 pt-2">
                    {% if accountNavItem.megaList %}
                        <div class="px-0 pb-4">
                            <ul class="space-y-4">
                                {% for item in accountNavItem.megaList %}
                                    <li>
                                        {% render "@" + item.component, item.data %}
                                    </li>
                                {% endfor %}
                            </ul>                        
                        </div>
                    {% endif %}
                </li>
            {% endif %}


        </ul>
        <ul class="lg:hidden">
            {% for item in quickLinks %}
                <li>
                    <a class="flex px-4 my-4 text-lg hover:underline" href="{{ item.url | path }}">
                        {{item.name}}
                        <div class="w-6 h-6 ml-1.5">
                            {% render "@icon", { name: item.icon, modifier: "w-full h-full fill-current", ariaHidden: true } %}
                        </div>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>

</nav>


<div class="items-center ml-auto hidden lg:flex lg:pl-4 h-full">
    <div class="flex items-center">
        {% render "@search-button" %}
    </div>

    {% if loggedIn %}
        <ul class="ml-3 lg:h-full lg:flex lg:items-end lg:overflow-visible">
            <li class="js-menu-item lg:pr-0 flex justify-between lg:h-full lg:items-end group">
                <a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-base lg:self-end {{ underlineClass }} lg:after:opacity-0" href="{{ accountNavItem.url | path }}">

                    <span class="flex items-center justify-center text-bkg text-base font-bold w-8 h-8 rounded-lg bg-button-surface hover:bg-button-surface-hover transition duration-300 ease-in-out mr-2">
                        <div class="h-4 w-4">
                            {% render "@icon", { name: "icon-user", modifier: "w-full h-full fill-current", ariaHidden: true } %}
                        </div>
                    </span>
                    {{ accountNavItem.menu_item }}

                    <div class="hidden lg:block h-3 w-3 ml-2 transition-transform duration-300 ease-in-out">
                        {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-button-2-surface rotate-90 group-hover:-rotate-90 transition-transform duration-300 ease-in-out', ariaHidden: true } %}
                    </div>
                </a>

                {% render "@mega-dropdown", {
                    megaList: accountNavItem.megaList,
                    heading: accountNavItem.menu_item,
                    megaIndex: "account"
                } %}
            </li>
        </ul>
    {% else %}
        <div class="ml-3">
            <a href="./sign-in.html" class="flex items-center gap-2 bg-action text-bkg text-base font-bold px-4 py-1 rounded-lg uppercase bg-button-surface hover:bg-button-surface-hover text-bkg transition duration-300 ease-in-out">
                <div class="h-4 w-4">
                    {% render "@icon", { name: "icon-user", modifier: "w-full h-full fill-current", ariaHidden: true } %}
                </div>
                Log in
            </a>
        </div>
    {% endif %}


</div>