Navigation

{% set activeClass = "lg:text-alpha" %}
{% set hoverClass = "lg:group-hover:text-alpha" %}
{% 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-1 lg:after:-bottom-7 lg:after:bg-alpha" %}

<div class="items-center flex lg:hidden mr-4">
    <div>
        {% render "@button--bravo-ghost", { text: "Call to action" }, true %}
    </div>
    <div class="flex items-center ml-3">
        {% 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-grey-100 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">
        <ul class="bg-white 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 border-b border-grey-400 lg:pr-6 xl:pr-12 lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center group {% if item.singleList %}lg:relative{% endif %}">
                    <a class="font-semibold hover:bg-grey-100 h-full relative py-3 px-4 flex flex-1 items-center hover:bg-alpha-dark text-3xl transition duration-150 text-grey-800 lg:p-0 lg:hover:bg-transparent lg:text-base {{underlineClass}} {{ hoverClass }} {% if pageTitle == item.menu_item %}{{ activeClass }}{% else %}lg:after:opacity-0{% endif %} " href="{{ item.url | path }}">{{item.menu_item}}</a>
                    {% if item.megaList or item.singleList %}
                       <button class="js-mobile-second-level-trigger-forward transition lg:hidden p-4 border-l border-grey-400 hover:bg-grey-300 bg-white" 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-bravo 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>
        <ul class="lg:hidden">
            {% for item in quickLinks %}
                <li>
                    <a class="flex px-4 my-4 text-xl 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>
    <div class="before:shadow-top-mid before:w-full before:h-4 before:absolute before:top-0 before:left-0 lg:before:hidden before:z-50 pointer-events-none"></div>
</nav>

<div class="items-center ml-10 hidden lg:flex">
    <div class="flex items-center">
        {% render "@search-button" %}
    </div>
    <div class="ml-6">
        {% render "@button--bravo-ghost", { text: "Call to action" }, true %}
    </div>
</div>