Navigation

{% set hoverClass = "lg:group-hover:text-bravo-900" %}
{% set activeClass = "lg:bg-[length:100%_2px]" %}
{% set underlineClass = "lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out" %}

<div class="items-center flex lg:hidden mr-5">
    <div class="flex items-center gap-5">
        <button>
            <span class="sr-only">
                login
            </span>
            <div class="h-5 w-5">
                {% render "@icon", { name: "icon-user", modifier: 'w-full h-full fill-current text-bravo', ariaHidden: true } %}
            </div> 
        </button>
        {% render "@search-button" %}
    </div>
</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-white w-full lg:h-auto 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 mt-8 lg:mt-0">
        <ul class="overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-center lg:overflow-visible">
            {% for item in navItems %}
                <li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group {% if item.singleList %}lg:relative{% endif %}">
                    <a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r {{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="h-3 w-3 hidden lg:block">
                                {% render "@icon", { name: "icon-chevron", modifier: 'ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180', ariaHidden: true } %}
                            </div>
                        {% endif %}
                    </a>
                    {% if item.megaList or item.singleList %}
                       <button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" 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-arrow", modifier: 'w-full h-full fill-current text-alpha-700 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 %}
        </ul>
        <div class="lg:hidden px-6">
            <ul class="pt-5 mt-8 border-t border-bravo-200"> 
                {% for item in quickLinks %}
                    <li>
                        <a class="flex my-4 text-1xl  text-bravo-900 font-heading font-medium" href="{{ item.url | path }}">
                            {{item.name}}
                            <div class="w-6 h-6 ml-3">
                                {% render "@icon", { name: item.icon, modifier: "w-full h-full fill-current text-alpha-700", ariaHidden: true } %}
                            </div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
            <a href="" class="sm:max-w-64 flex justify-center leading-none items-center relative z-0 font-heading font-medium text-lg align-middle py-3 px-8 no-underline rounded-lg transition duration-500 ease-in-out group bg-bravo-900 text-white border-2 border-bravo-900">
                <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
                    Login
                </div>
                <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                    {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current' } %}
                </div>
            </a>
        </div>
    </div>
</nav>