63 lines
1.7 KiB
JavaScript
63 lines
1.7 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 = primary_menu.querySelectorAll(
|
|
'.menu-item-submenu-toggle'
|
|
);
|
|
|
|
// #### 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'
|
|
);
|
|
console.log(header.contains(document.activeElement));
|
|
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';
|
|
button.setAttribute('aria-expanded', !isExpanded);
|
|
|
|
button.parentElement
|
|
.querySelector('.sub-menu')
|
|
.classList.toggle('sub-menu-open');
|
|
});
|
|
});
|
|
}
|