38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
const mobileNav = document.getElementById('mobile-nav');
|
|
|
|
function toggleMobileNav() {
|
|
if (mobileNav.classList.contains('show')) {
|
|
removeBackdrop()
|
|
} else {
|
|
const backdrop = document.createElement('div');
|
|
backdrop.className = 'mobile-nav-backdrop';
|
|
document.body.appendChild(backdrop);
|
|
backdrop.addEventListener('click', () => {
|
|
mobileNav.classList.remove('show');
|
|
removeBackdrop();
|
|
});
|
|
setTimeout(() => backdrop.classList.add('show'), 10);
|
|
}
|
|
mobileNav.classList.toggle('show');
|
|
}
|
|
|
|
function removeBackdrop() {
|
|
const backdrop = document.querySelector('.mobile-nav-backdrop');
|
|
if (backdrop) {
|
|
backdrop.classList.remove('show');
|
|
setTimeout(() => {
|
|
backdrop.remove();
|
|
}, 250);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') {
|
|
if (mobileNav.classList.contains('show')) {
|
|
mobileNav.classList.remove('show');
|
|
removeBackdrop();
|
|
}
|
|
}
|
|
});
|
|
document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
|
|
document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav); |