66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
// Mobile Navigation Drawer
|
|
class NavDrawer {
|
|
constructor(id) {
|
|
this.drawer = document.getElementById(id);
|
|
this.overlay = this.drawer?.querySelector('.drawer-overlay');
|
|
this.content = this.drawer?.querySelector('.drawer-content');
|
|
this.closeBtn = this.drawer?.querySelector('.drawer-close');
|
|
this.isOpen = false;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
if (!this.drawer) return;
|
|
|
|
// Close button
|
|
this.closeBtn?.addEventListener('click', () => this.close());
|
|
|
|
// Overlay click
|
|
this.overlay?.addEventListener('click', () => this.close());
|
|
|
|
// ESC key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && this.isOpen) {
|
|
this.close();
|
|
}
|
|
});
|
|
|
|
// Prevent body scroll when open
|
|
this.drawer.addEventListener('transitionend', () => {
|
|
if (this.isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
open() {
|
|
if (!this.drawer) return;
|
|
this.isOpen = true;
|
|
this.drawer.classList.add('drawer-open');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
close() {
|
|
if (!this.drawer) return;
|
|
this.isOpen = false;
|
|
this.drawer.classList.remove('drawer-open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
toggle() {
|
|
if (this.isOpen) {
|
|
this.close();
|
|
} else {
|
|
this.open();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize drawer on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.navDrawer = new NavDrawer('nav-drawer');
|
|
});
|