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);