tsv08kulmbach-website/public/assets/js/nav.js

/* Navigation: Burger-Overlay (aria-expanded, Escape, Klick auf Link schließt)
   + Dropdown-Untermenüs als Disclosure (Klick togglet aria-expanded).
   Die Untermenüs sind auch ohne JS per CSS (:hover/:focus-within) bedienbar;
   JS macht den Zustand für Screenreader sichtbar und ergänzt Escape/Außerklick. */
(function () {
    'use strict';

    var toggle = document.querySelector('.site-nav__toggle');
    var list = document.getElementById('site-nav-list');
    if (!toggle || !list) {
        return;
    }

    // Marker fürs CSS: mit JS steuert allein aria-expanded die Dropdowns,
    // der :focus-within-Fallback (No-JS) wird abgeschaltet (sonst ließe sich
    // ein Untermenü auf Touch nie wieder zuklappen).
    toggle.closest('.site-nav').classList.add('site-nav--js');

    var subToggles = Array.prototype.slice.call(list.querySelectorAll('.site-nav__sublink'));

    function closeSubmenus(except) {
        subToggles.forEach(function (btn) {
            if (btn !== except) {
                btn.setAttribute('aria-expanded', 'false');
            }
        });
    }

    function setOpen(open) {
        toggle.setAttribute('aria-expanded', String(open));
        document.body.classList.toggle('nav-open', open);
        toggle.querySelector('.visually-hidden').textContent = open ? 'Menü schließen' : 'Menü öffnen';
        if (!open) {
            closeSubmenus(null);
        }
    }

    toggle.addEventListener('click', function () {
        setOpen(toggle.getAttribute('aria-expanded') !== 'true');
    });

    list.addEventListener('click', function (event) {
        if (event.target.closest('a')) {
            setOpen(false);
        }
    });

    // Dropdown-Buttons: togglen ihr eigenes Untermenü, schließen die anderen.
    subToggles.forEach(function (btn) {
        btn.addEventListener('click', function () {
            var open = btn.getAttribute('aria-expanded') === 'true';
            closeSubmenus(btn);
            btn.setAttribute('aria-expanded', String(!open));
        });
    });

    // Klick außerhalb eines Dropdowns schließt offene Untermenüs.
    document.addEventListener('click', function (event) {
        if (!event.target.closest('.site-nav__item--has-submenu')) {
            closeSubmenus(null);
        }
    });

    document.addEventListener('keydown', function (event) {
        if (event.key !== 'Escape') {
            return;
        }
        // Zuerst ein offenes Untermenü schließen (Fokus zurück auf seinen Button) …
        var openSub = subToggles.filter(function (btn) {
            return btn.getAttribute('aria-expanded') === 'true';
        })[0];
        if (openSub) {
            openSub.setAttribute('aria-expanded', 'false');
            openSub.focus();
            return;
        }
        // … sonst das Burger-Overlay.
        if (toggle.getAttribute('aria-expanded') === 'true') {
            setOpen(false);
            toggle.focus();
        }
    });

    // Beim Vergrößern auf Desktop offenes Overlay/Untermenüs zurücksetzen.
    window.addEventListener('resize', function () {
        if (window.innerWidth > 1249 && toggle.getAttribute('aria-expanded') === 'true') {
            setOpen(false);
        }
    });
})();