"use client";

import { useState } from "react";

const SECTIONS = [
  {
    label: "Workspace",
    items: [
      { label: "Inbox", icon: "✉", count: 4 },
      { label: "Today", icon: "✦" },
      { label: "Upcoming", icon: "▤" },
    ],
  },
  {
    label: "Projects",
    items: [
      { label: "Marketing site", icon: "■", dot: "#ec4899" },
      { label: "Mobile v2", icon: "■", dot: "#22d3ee" },
      { label: "Onboarding", icon: "■", dot: "#facc15" },
    ],
  },
];

export function SidebarHybridNavbar() {
  const [openSidebar, setOpenSidebar] = useState(false);
  const [active, setActive] = useState("Today");

  return (
    <div className="bg-zinc-50 text-zinc-900 antialiased font-sans flex" style={{ minHeight: 460 }}>
      <aside
        className={`fixed inset-y-0 left-0 z-40 w-60 border-r border-zinc-200 bg-white transition-transform md:relative md:translate-x-0 ${openSidebar ? "translate-x-0" : "-translate-x-full"}`}
        aria-label="Primary"
      >
        <div className="flex items-center gap-2 px-3 py-3 border-b border-zinc-100">
          <span
            aria-hidden
            className="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white text-[12px] font-bold"
          >
            R
          </span>
          <span className="text-[14px] font-semibold tracking-tight">Riverway</span>
          <button
            type="button"
            className="ml-auto grid h-6 w-6 place-items-center rounded text-[10px] text-zinc-500 hover:bg-zinc-100"
            aria-label="Switch workspace"
          >
            ⇅
          </button>
        </div>

        <nav className="p-2 grid gap-3 text-[13px]">
          {SECTIONS.map((sec) => (
            <div key={sec.label}>
              <p className="px-2 pb-1 text-[10.5px] font-mono uppercase tracking-[0.16em] text-zinc-400">
                {sec.label}
              </p>
              <ul className="grid gap-0.5">
                {sec.items.map((it) => (
                  <li key={it.label}>
                    <button
                      type="button"
                      onClick={() => setActive(it.label)}
                      aria-current={active === it.label ? "page" : undefined}
                      className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left ${
                        active === it.label ? "bg-zinc-900 text-white" : "text-zinc-700 hover:bg-zinc-100"
                      }`}
                    >
                      {"dot" in it && it.dot ? (
                        <span aria-hidden className="h-2 w-2 rounded-sm" style={{ background: it.dot }} />
                      ) : (
                        <span aria-hidden className="w-4 text-center text-[12px]">{it.icon}</span>
                      )}
                      <span className="flex-1">{it.label}</span>
                      {"count" in it && it.count && (
                        <span className={`rounded px-1 text-[10px] ${active === it.label ? "bg-white/15 text-white" : "bg-zinc-100 text-zinc-600"}`}>
                          {it.count}
                        </span>
                      )}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>

        <div className="mt-auto absolute inset-x-0 bottom-0 border-t border-zinc-100 px-3 py-2 flex items-center gap-2 bg-white">
          <span aria-hidden className="h-7 w-7 rounded-full bg-gradient-to-br from-amber-300 to-rose-500" />
          <span className="text-[12.5px] leading-tight">
            <span className="block font-medium">Mira S.</span>
            <span className="block text-[11px] text-zinc-500">Pro · 4 seats</span>
          </span>
          <button
            type="button"
            className="ml-auto grid h-7 w-7 place-items-center rounded text-zinc-500 hover:bg-zinc-100"
            aria-label="Settings"
          >
            ⚙
          </button>
        </div>
      </aside>

      <div className="flex-1 flex flex-col min-w-0">
        <header className="flex h-12 items-center gap-3 border-b border-zinc-200 bg-white px-4 text-[13px]">
          <button
            type="button"
            onClick={() => setOpenSidebar((v) => !v)}
            aria-expanded={openSidebar}
            className="md:hidden grid h-8 w-8 place-items-center rounded-md hover:bg-zinc-100"
            aria-label="Toggle sidebar"
          >
            <span aria-hidden>≡</span>
          </button>
          <span className="text-zinc-500">Workspace</span>
          <span aria-hidden className="text-zinc-300">/</span>
          <span className="font-medium">{active}</span>

          <div className="ml-auto flex items-center gap-2">
            <kbd className="hidden md:inline rounded border border-zinc-200 bg-zinc-50 px-1.5 text-[10px] text-zinc-500">⌘K</kbd>
            <button type="button" className="rounded-md border border-zinc-200 px-2.5 py-1 text-[12px] hover:bg-zinc-50">
              Share
            </button>
            <button type="button" className="rounded-md bg-zinc-900 px-2.5 py-1 text-[12px] text-white hover:bg-zinc-800">
              ＋ Task
            </button>
          </div>
        </header>

        <div data-nav-context className="px-5 py-6">
          <h1 className="text-[22px] font-semibold tracking-tight">{active}</h1>
          <p className="mt-1 text-[12.5px] text-zinc-500">Wednesday · 6 tasks · 1 overdue</p>
        </div>
      </div>

      {openSidebar && (
        <button
          type="button"
          onClick={() => setOpenSidebar(false)}
          aria-label="Close sidebar"
          className="md:hidden fixed inset-0 z-30 bg-zinc-900/30"
        />
      )}
    </div>
  );
}
Sidebar Hybrid Navbar

Today
