64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
export default function menuInit() {
|
|
let main_navigation = document.querySelector('#primary-menu');
|
|
const header = document.querySelector('#primary-header');
|
|
const primary_menu = header.querySelector('#primary-menu');
|
|
const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
|
|
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
|
|
|
|
function closeSubmenus(e) {
|
|
submenuToggles.forEach((button) => {
|
|
button.setAttribute('aria-expanded', false);
|
|
button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open');
|
|
});
|
|
}
|
|
|
|
// #### Open/close burger nav
|
|
// burgerMenuToggle.addEventListener('click', function (e) {
|
|
// e.preventDefault();
|
|
// header.classList.toggle('nav-open');
|
|
// burgerMenuToggle.toggleAttribute('aria-expanded');
|
|
// gsap.from(primary_menu, {
|
|
// 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(e);
|
|
if (!isExpanded) {
|
|
button.setAttribute('aria-expanded', true);
|
|
button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
closeSubmenus(e);
|
|
}
|
|
});
|
|
}
|