File size: 1,887 Bytes
1b756c8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon');
if (mobileMenuButton && mobileMenu && menuIcon && closeIcon) {
// Toggle menu on button click
mobileMenuButton.addEventListener('click', () => {
const isExpanded =
mobileMenuButton.getAttribute('aria-expanded') === 'true';
// Toggle menu visibility
mobileMenu.classList.toggle('hidden');
// Toggle icons
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
// Update aria-expanded for accessibility
mobileMenuButton.setAttribute('aria-expanded', (!isExpanded).toString());
});
// Close menu when clicking on a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach((link) => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
mobileMenuButton.setAttribute('aria-expanded', 'false');
});
});
// Close menu when clicking outside
document.addEventListener('click', (event) => {
const target = event.target as Node;
const isClickInsideMenu = mobileMenu.contains(target);
const isClickOnButton = mobileMenuButton.contains(target);
if (
!isClickInsideMenu &&
!isClickOnButton &&
!mobileMenu.classList.contains('hidden')
) {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
mobileMenuButton.setAttribute('aria-expanded', 'false');
}
});
}
});
|