57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
const body = document.body;
|
|
const menuToggle = document.getElementById('menuToggle');
|
|
const menuClose = document.getElementById('menuClose');
|
|
const menuOverlay = document.getElementById('menuOverlay');
|
|
const mobileMenu = document.getElementById('mobileMenu');
|
|
const siteContent = document.getElementById('siteContent');
|
|
|
|
function openMenu() {
|
|
body.classList.add('menu-open');
|
|
menuOverlay.hidden = false;
|
|
menuToggle.classList.add('is-open');
|
|
menuToggle.setAttribute('aria-expanded', 'true');
|
|
menuToggle.setAttribute('aria-label', 'Close menu');
|
|
mobileMenu.setAttribute('aria-hidden', 'false');
|
|
siteContent.setAttribute('inert', '');
|
|
menuClose.focus();
|
|
}
|
|
|
|
function closeMenu() {
|
|
body.classList.remove('menu-open');
|
|
menuToggle.classList.remove('is-open');
|
|
menuToggle.setAttribute('aria-expanded', 'false');
|
|
menuToggle.setAttribute('aria-label', 'Open menu');
|
|
mobileMenu.setAttribute('aria-hidden', 'true');
|
|
siteContent.removeAttribute('inert');
|
|
menuToggle.focus();
|
|
|
|
window.setTimeout(() => {
|
|
if (!body.classList.contains('menu-open')) {
|
|
menuOverlay.hidden = true;
|
|
}
|
|
}, 250);
|
|
}
|
|
|
|
function toggleMenu() {
|
|
if (body.classList.contains('menu-open')) {
|
|
closeMenu();
|
|
} else {
|
|
openMenu();
|
|
}
|
|
}
|
|
|
|
menuToggle.addEventListener('click', toggleMenu);
|
|
menuClose.addEventListener('click', closeMenu);
|
|
menuOverlay.addEventListener('click', closeMenu);
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && body.classList.contains('menu-open')) {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
|
|
closeMenu();
|
|
}
|
|
}); |