// 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');
});