src/client/sidebar.ts

export {};

const drawer = document.getElementById("drawer") as HTMLElement | null;
const backdrop = document.getElementById("backdrop") as HTMLElement | null;
const menuBtn = document.getElementById("menuBtn") as HTMLButtonElement | null;

function openDrawer(): void {
  if (!drawer || !backdrop || !menuBtn) return;
  drawer.classList.add("is-open");
  drawer.setAttribute("aria-hidden", "false");
  backdrop.hidden = false;
  menuBtn.setAttribute("aria-expanded", "true");
}

function closeDrawer(): void {
  if (!drawer || !backdrop || !menuBtn) return;
  drawer.classList.remove("is-open");
  drawer.setAttribute("aria-hidden", "true");
  backdrop.hidden = true;
  menuBtn.setAttribute("aria-expanded", "false");
}

menuBtn?.addEventListener("click", () => {
  const isOpen = drawer?.classList.contains("is-open");
  isOpen ? closeDrawer() : openDrawer();
});

backdrop?.addEventListener("click", closeDrawer);

document.addEventListener("keydown", (e: KeyboardEvent) => {
  if (e.key === "Escape") closeDrawer();
});