---
import { LuMenu } from "react-icons/lu";
---

<button
  id="button-toggle"
  class="btn btn-icon"
  class:list={[Astro.props.class]}
>
  {(<LuMenu />)}
</button>

<div
  id="drawer"
  class="fixed bg-white dark:bg-surface-800 shadow-lg transition-all duration-300 left-0 top-0 h-screen w-64 -translate-x-[100vw] z-[100]"
>
  <button
    id="button-close"
    class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
    aria-label="Close"
  >
    &times;
  </button>
  <div class="p-4">
    <slot />
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const buttonToggle = document.getElementById("button-toggle");
    const drawer = document.getElementById("drawer");
    const buttonClose = document.getElementById("button-close");

    buttonToggle?.addEventListener("click", () => {
      drawer?.classList.toggle("-translate-x-[100vw]");
    });

    buttonClose?.addEventListener("click", () => {
      drawer?.classList.add("-translate-x-[100vw]");
    });
  });
</script>