47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
|
export function initMobileMenu() {
|
||
|
|
const menuToggle = document.querySelector('.mobile-toggle');
|
||
|
|
const menu = document.getElementById('menu');
|
||
|
|
const app = document.getElementById('app');
|
||
|
|
const content = document.getElementById('content');
|
||
|
|
|
||
|
|
if (!menuToggle || !menu) return;
|
||
|
|
|
||
|
|
menuToggle.addEventListener('click', (e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
menu.classList.toggle('mobile-open');
|
||
|
|
app.classList.toggle('menu-open');
|
||
|
|
});
|
||
|
|
|
||
|
|
const menuItems = menu.querySelectorAll('.menu-item');
|
||
|
|
menuItems.forEach(item => {
|
||
|
|
item.addEventListener('click', () => {
|
||
|
|
menu.classList.remove('mobile-open');
|
||
|
|
app.classList.remove('menu-open');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('click', (e) => {
|
||
|
|
const isClickInsideMenu = menu.contains(e.target);
|
||
|
|
const isClickOnToggle = menuToggle.contains(e.target);
|
||
|
|
|
||
|
|
if (!isClickInsideMenu && !isClickOnToggle && menu.classList.contains('mobile-open')) {
|
||
|
|
menu.classList.remove('mobile-open');
|
||
|
|
app.classList.remove('menu-open');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('keydown', (e) => {
|
||
|
|
if (e.key === 'Escape' && menu.classList.contains('mobile-open')) {
|
||
|
|
menu.classList.remove('mobile-open');
|
||
|
|
app.classList.remove('menu-open');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
if (window.innerWidth > 768) {
|
||
|
|
menu.classList.remove('mobile-open');
|
||
|
|
app.classList.remove('menu-open');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|