App Sidebar

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { CalendarDays, Home, Inbox, Menu, Plus, Search, Settings, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppSidebarProps {
  workspace?: string;
  nav?: { label: string; href: string; icon: LucideIcon; count?: number }[];
  boards?: { name: string; href: string; tone: "peach" | "mint" | "lavender" | "butter" }[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DOT = { peach: "bg-da-accent-fg/70", mint: "bg-da-secondary-fg/70", lavender: "bg-da-primary", butter: "bg-da-warning" } as const;

/** Friendly app shell: warm sidebar with workspace chip, big “New task” pill, search, nav with count bubbles and a colored-dot board list; drawer on mobile. */
export function AppSidebar({
  workspace = "Bright & Co",
  nav = [
    { label: "Home", href: "#home", icon: Home },
    { label: "Inbox", href: "#inbox", icon: Inbox, count: 3 },
    { label: "This week", href: "#week", icon: CalendarDays },
  ],
  boards = [
    { name: "Website relaunch", href: "#b1", tone: "lavender" },
    { name: "Team retreat", href: "#b2", tone: "mint" },
    { name: "Q4 content", href: "#b3", tone: "peach" },
    { name: "Hiring", href: "#b4", tone: "butter" },
  ],
  activeHref = "#week",
  children,
  className,
}: AppSidebarProps) {
  const [open, setOpen] = useState(false);
  const id = useId();

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const item = (active: boolean) =>
    cn(
      "da-focus da-transition flex h-11 items-center gap-3 rounded-da-md px-3 text-[15px] font-medium",
      active ? "bg-da-surface text-da-fg shadow-da-sm" : "text-da-muted-fg hover:bg-da-surface/60 hover:text-da-fg",
    );

  return (
    <div className={cn("flex min-h-dvh bg-da-bg text-da-fg", className)}>
      {open && <div aria-hidden className="fixed inset-0 z-40 bg-da-overlay lg:hidden" onClick={() => setOpen(false)} />}
      <aside
        id={id}
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col bg-da-surface-2 p-4 transition-transform duration-(--da-duration-slow) ease-da lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0 motion-reduce:transition-none",
          open ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <div className="flex items-center gap-2.5 px-1">
          <span aria-hidden className="grid size-10 place-items-center rounded-da-md bg-da-accent text-lg">
            🌱
          </span>
          <span className="font-da-display text-lg font-extrabold">{workspace}</span>
          <button
            type="button"
            aria-label="Close navigation"
            onClick={() => setOpen(false)}
            className="da-focus ml-auto grid size-9 place-items-center rounded-full hover:bg-da-surface lg:hidden"
          >
            <X aria-hidden className="size-4" />
          </button>
        </div>
        <a
          href="#new"
          className="da-focus da-transition mt-6 flex h-12 items-center justify-center gap-2 rounded-da-pill bg-da-primary font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-0.5"
        >
          <Plus aria-hidden className="size-5" /> New task
        </a>
        <button type="button" className="da-focus mt-3 flex h-11 items-center gap-3 rounded-da-md bg-da-surface px-3 text-[15px] text-da-muted-fg">
          <Search aria-hidden className="size-4" /> Search
          <kbd className="ml-auto rounded-da-sm bg-da-surface-2 px-1.5 font-da-mono text-xs">/</kbd>
        </button>
        <nav aria-label="Main" className="mt-6 flex-1 overflow-y-auto">
          <ul className="space-y-1">
            {nav.map((n) => (
              <li key={n.href}>
                <a
                  href={n.href}
                  aria-current={n.href === activeHref ? "page" : undefined}
                  onClick={() => setOpen(false)}
                  className={item(n.href === activeHref)}
                >
                  <n.icon aria-hidden className="size-5" />
                  {n.label}
                  {n.count !== undefined && (
                    <span className="ml-auto grid h-6 min-w-6 place-items-center rounded-full bg-da-accent px-1.5 text-xs font-bold text-da-accent-fg">
                      {n.count}
                      <span className="sr-only"> unread</span>
                    </span>
                  )}
                </a>
              </li>
            ))}
          </ul>
          <p className="mt-8 mb-2 flex items-center justify-between px-3 text-xs font-bold text-da-muted-fg uppercase">
            Boards
            <a href="#new-board" aria-label="New board" className="da-focus grid size-6 place-items-center rounded-full hover:bg-da-surface">
              <Plus aria-hidden className="size-3.5" />
            </a>
          </p>
          <ul className="space-y-1">
            {boards.map((b) => (
              <li key={b.href}>
                <a href={b.href} aria-current={b.href === activeHref ? "page" : undefined} className={item(b.href === activeHref)}>
                  <span aria-hidden className={cn("size-3 rounded-full", DOT[b.tone])} />
                  {b.name}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <a href="#settings" className={item(false)}>
          <Settings aria-hidden className="size-5" /> Settings
        </a>
      </aside>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-3 p-4 lg:hidden">
          <button
            type="button"
            onClick={() => setOpen(true)}
            aria-expanded={open}
            aria-controls={id}
            aria-label="Open navigation"
            className="da-focus grid size-11 place-items-center rounded-full bg-da-surface shadow-da-sm"
          >
            <Menu aria-hidden className="size-5" />
          </button>
          <span className="font-da-display font-extrabold">{workspace}</span>
        </div>
        <main>{children}</main>
      </div>
    </div>
  );
}

export default AppSidebar;