most of the website

static/js/drawer.js

@@ -0,0 +1,65 @@
+// 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');
+});