---
import { Bars3Icon } from "@heroicons/react/24/outline";
import ThemeToggle from '../components/ThemeToggle.astro';
---

<header class="shadow-sm bg-base-100">
  <!-- ********** Mobile (< lg): drawer & navbar ********** -->
  <div class="drawer lg:hidden">
    <!-- Hidden checkbox toggles the drawer -->
    <input id="nav-drawer" type="checkbox" class="drawer-toggle" />

    <div class="drawer-content flex flex-col">
      <nav class="navbar bg-base-100 w-full lg:px-4 relative px-2">
        <!-- Hamburger icon on the left -->
        <div class="flex-none">
          <label
            for="nav-drawer"
            aria-label="Open sidebar"
            class="btn btn-ghost btn-square"
          >
            <Bars3Icon className="h-5 w-5" />
          </label>
        </div>

        <!-- Logo centered absolutely -->
        <a
          href="/"
          class="absolute left-1/2 -translate-x-1/2 flex items-center"
        >
          <span class="text-2xl font-bold">ReFL</span>
        </a>
        <div class="flex-none ml-auto">
          <ThemeToggle />
        </div>
      </nav>
    </div>

    <!-- Slide-out sidebar -->
    <div class="drawer-side">
      <label for="nav-drawer" class="drawer-overlay" aria-label="Close sidebar"
      ></label>
      <ul class="menu p-4 w-80 bg-base-100 min-h-full">
        <li>
          <a href="/" class="normal-case font-bold text-xl">Home</a>
        </li>
        <li>
          <a href="/members/" class="normal-case font-bold text-xl">Members</a>
        </li>
        <li>
          <a href="/meetings/" class="normal-case font-bold text-xl">Meetings</a>
        </li>
        <li>
          <a href="/resources/" class="normal-case font-bold text-xl">Resources</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- ********** Desktop (>= lg): standard navbar ********** -->
  <nav
    class="navbar hidden lg:flex w-full bg-base-100"
    style="--navbar-padding:0;"
  >
    <div class="navbar-start pl-6">
      <a href="/" class="flex items-center gap-2">
        <span class="text-2xl font-bold">ReFL</span>
      </a>
    </div>
    <div class="navbar-center">
      <ul class="menu menu-horizontal gap-2">
        <li>
          <a href="/" class="normal-case font-bold text-lg">Home</a>
        </li>
        <li>
          <a href="/members/" class="normal-case font-bold text-lg">Members</a>
        </li>
        <li>
          <a href="/meetings/" class="normal-case font-bold text-lg">Meetings</a>
        </li>
        <li>
          <a href="/resources/" class="normal-case font-bold text-lg">Resources</a>
        </li>
      </ul>
    </div>
    <div class="navbar-end">
      <ThemeToggle />
    </div>
  </nav>
</header>
