45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
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);
|