53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
(function () {
|
|
var burger = document.querySelector('.nav-burger');
|
|
var menu = document.getElementById('mobileMenu');
|
|
if (!burger || !menu) return;
|
|
|
|
function closeMenu() {
|
|
menu.hidden = true;
|
|
burger.classList.remove('is-open');
|
|
burger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
|
|
function openMenu() {
|
|
menu.hidden = false;
|
|
burger.classList.add('is-open');
|
|
burger.setAttribute('aria-expanded', 'true');
|
|
}
|
|
|
|
burger.addEventListener('click', function () {
|
|
if (menu.hidden) {
|
|
openMenu();
|
|
} else {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
menu.addEventListener('click', function (e) {
|
|
if (e.target.tagName === 'A') {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function (e) {
|
|
if (!menu.hidden && !menu.contains(e.target) && !burger.contains(e.target)) {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
// Desktop CSS hides .mobile-menu entirely, but if the menu was left open
|
|
// on mobile and the viewport grows past the breakpoint (resize, rotate,
|
|
// devtools), reset state so it doesn't reopen collapsed at mobile width.
|
|
window.matchMedia('(min-width: 761px)').addEventListener('change', function (e) {
|
|
if (e.matches) {
|
|
closeMenu();
|
|
}
|
|
});
|
|
})();
|