const MOBILE_BREAKPOINT_PX = 768;

const mobileMenuHelper = () => {
    const mobileMenu = document.getElementById('nav-menu');
    const mobileMenuToggleLabel = document.getElementById('nav-toggle-label');
    const mobileMenuToggle = document.querySelector('.nav-toggle-input');
    const menuItems = mobileMenu.querySelectorAll('.nav-item');

    const isMobile = () => window.innerWidth <= MOBILE_BREAKPOINT_PX;

    const syncMenuAriaHidden = () => {
        if (isMobile()) {
            mobileMenu.setAttribute('aria-hidden', mobileMenuToggle.checked ? 'false' : 'true');
        } else {
            mobileMenu.removeAttribute('aria-hidden');
        }
    };

    const syncLabelAriaExpanded = () => {
        mobileMenuToggleLabel.setAttribute('aria-expanded', mobileMenuToggle.checked ? 'true' : 'false');
    };

    menuItems.forEach((item) => {
        item.addEventListener('click', () => {
            mobileMenuToggle.checked = false;
            syncLabelAriaExpanded();
            syncMenuAriaHidden();
        });
    });

    mobileMenuToggle.addEventListener('change', () => {
        syncLabelAriaExpanded();
        syncMenuAriaHidden();
    });

    window.addEventListener('resize', () => {
        syncMenuAriaHidden();
    });

    syncMenuAriaHidden();
    syncLabelAriaExpanded();
};

document.addEventListener('DOMContentLoaded', mobileMenuHelper);