Navigation

{% set activeClass = "lg:nav-fg" %}
{% set hoverClass = "lg:before:transition-opacity lg:before:duration-300 lg:before:ease-in-out lg:before:w-full lg:before:absolute lg:before:h-1 lg:before:-bottom-2 lg:before:bg-transparent lg:hover:before:bg-nav-fg" %}
{% 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-2 lg:after:bg-nav-fg" %}

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

{% set activeSiteLink = './business' | path %}

{%if activeSection == "business" %}
    {% set activeSiteLink = './index' | path %}
{% endif %}

<nav id="menu" data-vanilla-module="Menu" class="bg-nav-bg items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 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 flex">
        <div class="max-lg:container">
            <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-[clamp(1.25rem,2vw,2.25rem)] lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center {% if item.singleList %}lg:relative{% endif %}">
                        {% if item.megaList or item.singleList %}
                            <button class="js-mobile-second-level-trigger-forward font-bold text-nav-fg h-full relative py-3 flex flex-1 items-center text-3xl transition duration-150 lg:p-0 lg:text-[clamp(0.9rem,0.9vw+0.25rem,1.125rem)] hover:bg-alpha-dark lg:hover:bg-transparent {{underlineClass}} {{ hoverClass }} {% if pageTitle == item.menu_item %}{{ activeClass }}{% else %}lg:after:opacity-0{% endif %}" aria-expanded="false" aria-controls="second-level-menu-{{ item.menu_item | lower | replace(' ', '-') }}" aria-haspopup="true">
                                {{ item.menu_item }}
                                <div class="w-3 h-3 ml-2 mt-0.5 hidden lg:block transition-transform duration-200 [[aria-expanded='true']_&]:rotate-180">
                                    {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-current text-nav-arrow', ariaHidden: true } %}
                                </div>
                                <div class="h-10 w-10 pl-3  border-l border-l-nav-fg ml-auto lg:hidden">
                                    {% render "@icon", { name: "icon-arrow", modifier: 'w-full h-full fill-current transform text-nav-arrow', ariaHidden: true } %}
                                </div>
                            </button>
                        {% else %}
                            <a class="font-bold h-full relative py-3 px-4 flex flex-1 items-center text-3xl lg:hover:underline transition duration-150 text-nav-fg lg:p-0 lg:text-[clamp(0.9rem,0.9vw+0.25rem,1.125rem)] hover:bg-alpha-dark lg:hover:bg-transparent {{underlineClass}} {{ hoverClass }} {% if pageTitle == item.menu_item %}{{ activeClass }}{% else %}lg:after:opacity-0{% endif %}" href="{{ item.url | path }}">
                                {{ item.menu_item }}
                            </a>
                        {% 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 activeSection == "business" %}
                <li class="px-4 lg:px-0 mt-11 lg:mt-0">
                    <a href="/" class="inline-flex leading-none items-center relative z-0 font-body font-bold lg:text-[15px] xl:text-[16px] 2xl:text-[19px] align-middle py-3.5 px-8 no-underline rounded-full transition duration-500 ease-in-out group text-greybravo-800 bg-white [[data-nav-theme='contrast']_&]:bg-brand-gradient-4">
                        <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
                            Enquire now
                        </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', ariaHidden: true } %}            
                        </div>
                    </a>
                </li>
                {% endif %}
            </ul>
            <ul class="flex mt-10 lg:hidden">
                {% for item in quickLinks %}
                    <li class="relative">
                        {% render "@icon-link", { name: item.name, url: item.url, icon: item.icon, colour: 'text-bravo-800' } %}
                    </li>
                {% endfor %}
            </ul>
            <div class="mt-10 lg:hidden pt-6 border-t border-t-grey-200">
                <a href="{{ activeSiteLink }}" class="text-bravo-800 text-1xl lg:text-base font-bold lg:font-extrabold">
                    {% if activeSection == "personal" %}
                        Go to Business Broadband site
                    {% elseif activeSection == "business" %}
                        Go to Personal Broadband site
                    {% endif %}
                </a>
            </div>
        </div>
    </div>
</nav>