blob: 1d27633a88226beb371a1752b9463fa45f961cb4 (
plain)
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
/**
* hamburger.js
* Hamburger menu toggle with focus trap and keyboard navigation
*/
export function initHamburger() {
'use strict';
const hamburgerBtn = document.getElementById('hamburger-btn');
const menuOverlay = document.getElementById('menu-overlay');
const menuLinks = document.querySelectorAll('.menu-links a');
const themeSwitch = document.getElementById('theme-switch');
if (!hamburgerBtn || !menuOverlay) return;
// Toggle menu on hamburger click
hamburgerBtn.addEventListener('click', () => {
const isOpen = hamburgerBtn.getAttribute('aria-expanded') === 'true';
setMenuOpen(!isOpen);
});
// Close menu on overlay click
menuOverlay.addEventListener('click', (e) => {
if (e.target === menuOverlay) {
setMenuOpen(false);
}
});
// Close menu on menu link click
menuLinks.forEach((link) => {
link.addEventListener('click', () => {
setMenuOpen(false);
});
});
// Close menu on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
setMenuOpen(false);
}
});
// Focus trap: Tab through menu items and theme switch
menuOverlay.addEventListener('keydown', (e) => {
if (e.key !== 'Tab') return;
const focusableElements = Array.from(
menuOverlay.querySelectorAll('a, button')
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
if (e.shiftKey) {
if (document.activeElement === firstElement) {
lastElement.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastElement) {
firstElement.focus();
e.preventDefault();
}
}
});
function setMenuOpen(isOpen) {
hamburgerBtn.setAttribute('aria-expanded', isOpen);
hamburgerBtn.classList.toggle('active', isOpen);
menuOverlay.classList.toggle('active', isOpen);
if (isOpen) {
document.body.style.overflow = 'hidden';
// Focus the first menu link
const firstLink = menuLinks[0];
if (firstLink) {
setTimeout(() => firstLink.focus(), 100);
}
} else {
document.body.style.overflow = '';
hamburgerBtn.focus();
}
}
}
|
