website/hub/services/static/js/nav.js

document.addEventListener('DOMContentLoaded', function () {
    // Mobile navigation toggle functionality
    const navToggle = document.getElementById('navToggle');
    const navMenu = document.getElementById('navMenu');
    const headerNav = document.getElementById('headerNav');
    const topLine = document.getElementById('topLine');
    const middleLine = document.getElementById('middleLine');
    const bottomLine = document.getElementById('bottomLine');

    let isMenuOpen = false;

    // Toggle mobile menu
    navToggle.addEventListener('click', function () {
        isMenuOpen = !isMenuOpen;

        // Toggle menu visibility classes
        if (isMenuOpen) {
            navMenu.classList.remove('nav__menu-hidden');
            navMenu.classList.add('nav__menu-active');
            navToggle.setAttribute('aria-expanded', 'true');

            // Animate hamburger to X
            topLine.classList.add('svg-line-top');
            middleLine.classList.add('svg-line-center');
            bottomLine.classList.add('svg-line-bottom');
        } else {
            navMenu.classList.remove('nav__menu-active');
            navMenu.classList.add('nav__menu-hidden');
            navToggle.setAttribute('aria-expanded', 'false');

            // Animate X back to hamburger
            topLine.classList.remove('svg-line-top');
            middleLine.classList.remove('svg-line-center');
            bottomLine.classList.remove('svg-line-bottom');
        }
    });

    // Close menu when clicking on menu items (mobile)
    const menuItems = navMenu.querySelectorAll('.menu__item-link');
    menuItems.forEach(function (item) {
        item.addEventListener('click', function () {
            if (window.innerWidth < 992 && isMenuOpen) {
                // Trigger the toggle to close menu
                navToggle.click();
            }
        });
    });

    // Header scroll behavior
    let isAtTop = true;

    function handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const newAtTop = scrollTop <= 200;

        if (newAtTop !== isAtTop) {
            isAtTop = newAtTop;

            if (isAtTop) {
                headerNav.classList.remove('header-nav--fixed');
                headerNav.classList.add('header-nav--top');
            } else {
                headerNav.classList.remove('header-nav--top');
                headerNav.classList.add('header-nav--fixed');
            }
        }
    }

    // Throttle scroll events for better performance
    let scrollThrottle = false;
    window.addEventListener('scroll', function () {
        if (!scrollThrottle) {
            requestAnimationFrame(function () {
                handleScroll();
                scrollThrottle = false;
            });
            scrollThrottle = true;
        }
    });

    // Handle window resize to ensure proper menu state
    window.addEventListener('resize', function () {
        if (window.innerWidth >= 992 && isMenuOpen) {
            // Reset menu state on desktop
            isMenuOpen = false;
            navMenu.classList.remove('nav__menu-active');
            navMenu.classList.add('nav__menu-hidden');
            navToggle.setAttribute('aria-expanded', 'false');

            // Reset hamburger animation
            topLine.classList.remove('svg-line-top');
            middleLine.classList.remove('svg-line-center');
            bottomLine.classList.remove('svg-line-bottom');
        }
    });
});