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

const currentPath = `~${resolvePathname(Astro.originPathname)}`
const drawerToggleId = "header-drawer"
---

<div class="sm:m-auto">
  <div class="drawer drawer-end">
    <input id={drawerToggleId} 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-xl h-5">
            <Breadcrumb />
          </h1>
          <HamburgerMenuButton for={drawerToggleId} />
        </div>
        <div class="hidden flex-none sm:block">
          <Navbar />
        </div>
      </div>
    </div>
    <div class="drawer-side z-50">
      <label
        for={drawerToggleId}
        aria-label="close sidebar"
        class="drawer-overlay"></label>
      <!-- Drawer -->
      <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>