amare/resources/js/app.js

import './motion.js';

document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('[data-menu-button]');
    const navigation = document.querySelector('[data-main-nav]');

    if (!menuButton || !navigation) {
        return;
    }

    const setOpen = (isOpen) => {
        navigation.classList.toggle('is-open', isOpen);
        navigation.classList.toggle('hidden', !isOpen && !window.matchMedia('(min-width: 768px)').matches);
        navigation.classList.toggle('flex', isOpen || window.matchMedia('(min-width: 768px)').matches);
        document.body.classList.toggle('menu-open', isOpen);
        menuButton.setAttribute('aria-expanded', String(isOpen));
        menuButton.setAttribute('aria-label', isOpen ? 'Fechar menu' : 'Abrir menu');
    };

    menuButton.addEventListener('click', () => {
        const isOpen = menuButton.getAttribute('aria-expanded') !== 'true';
        setOpen(isOpen);
    });

    navigation.querySelectorAll('a').forEach((link) => {
        link.addEventListener('click', () => setOpen(false));
    });

    window.matchMedia('(min-width: 768px)').addEventListener('change', (event) => {
        if (event.matches) {
            setOpen(false);
            navigation.classList.remove('hidden');
            navigation.classList.add('flex');
        } else {
            navigation.classList.remove('is-open', 'flex');
            navigation.classList.add('hidden');
            document.body.classList.remove('menu-open');
            menuButton.setAttribute('aria-expanded', 'false');
            menuButton.setAttribute('aria-label', 'Abrir menu');
        }
    });
});