77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
export default function menuInit() {
|
|
let main_navigation = document.querySelector('#primary-menu');
|
|
const header = document.querySelector('#primary-header');
|
|
if (!header) return;
|
|
|
|
const primary_menu = header.querySelector('#primary-menu');
|
|
const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
|
|
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
|
|
const menusWrapper = header.querySelector('.menus-wrapper');
|
|
|
|
function closeSubmenus() {
|
|
submenuToggles.forEach((button) => {
|
|
button.setAttribute('aria-expanded', 'false');
|
|
const sub = button.parentElement?.querySelector('.sub-menu');
|
|
if (sub) sub.classList.remove('sub-menu-open');
|
|
});
|
|
}
|
|
|
|
// #### Open/close burger nav
|
|
mobileMenuToggle.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const isOpen = header.classList.contains('nav-open');
|
|
header.classList.toggle('nav-open');
|
|
mobileMenuToggle.toggleAttribute('aria-expanded');
|
|
if (!isOpen) {
|
|
gsap.from(menusWrapper, {
|
|
opacity: 20,
|
|
y: '-100vh',
|
|
duration: 0.5,
|
|
ease: Power4.easeOut,
|
|
});
|
|
}
|
|
});
|
|
|
|
// // #### Close nav when reaching the end of the menu with tab
|
|
// document.addEventListener(
|
|
// 'focusin',
|
|
// (e) => {
|
|
// const header = document.querySelector('#primary-header');
|
|
// if (
|
|
// header.classList.contains('nav-open') &&
|
|
// !header.contains(document.activeElement)
|
|
// ) {
|
|
// header.classList.remove('nav-open');
|
|
// burgerMenuToggle.setAttribute('aria-expanded', false);
|
|
|
|
// burgerMenuToggle.focus();
|
|
// }
|
|
// },
|
|
// true,
|
|
// );
|
|
|
|
submenuToggles.forEach((button) => {
|
|
button.addEventListener('click', function (e) {
|
|
let isExpanded = button.getAttribute('aria-expanded') === 'true';
|
|
|
|
closeSubmenus();
|
|
if (!isExpanded) {
|
|
button.setAttribute('aria-expanded', true);
|
|
button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!header.contains(e.target)) {
|
|
closeSubmenus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
closeSubmenus();
|
|
}
|
|
});
|
|
}
|