---
import Navbar from "./Navbar.astro"
import NavbarDrawer from "./NavbarDrawer.astro"
import HamburgerMenuButton from "./HamburgerMenuButton.astro"
import { resolvePathname } from "@/utils/linking"

const currentPath = `~${resolvePathname(Astro.originPathname)}`
---

<div class="sm:m-auto">
  <div class="drawer drawer-end">
    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content flex flex-col">
      <!-- Navbar -->
      <div class="navbar w-full justify-end">
        <div class="flex justify-between items-center w-full h-full sm:hidden">
          <h1 class="!text-2xl h-5">
            {currentPath}
          </h1>
          <HamburgerMenuButton id="my-drawer-3" />
        </div>
        <div class="hidden flex-none sm:block">
          <Navbar />
        </div>
      </div>
    </div>
    <div class="drawer-side z-50">
      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
      ></label>
      <ul class="menu bg-cat-base min-h-full w-80 p-4">
        <li class="text-xl font-bold my-5">
          {currentPath}
        </li>
        <NavbarDrawer />
      </ul>
    </div>
  </div>
</div>