App Sidebar

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import {
  BarChart3,
  Bell,
  BookOpen,
  FileText,
  LayoutGrid,
  Menu,
  Plug,
  Settings,
  Users,
  X,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppSidebarItem {
  label: string;
  href: string;
  icon: LucideIcon;
  /** Small counter on the right (e.g. unread items). */
  count?: number;
}

export interface AppSidebarSection {
  title?: string;
  items: AppSidebarItem[];
}

export interface AppSidebarProps {
  workspace?: { name: string; plan: string };
  sections?: AppSidebarSection[];
  /** href of the current page (gets aria-current="page"). */
  activeHref?: string;
  user?: { name: string; email: string };
  /** Promo/usage block at the bottom of the sidebar. */
  footer?: ReactNode;
  /** Page content rendered next to the sidebar. */
  children?: ReactNode;
  className?: string;
}

const DEFAULT_SECTIONS: AppSidebarSection[] = [
  {
    items: [
      { label: "Overview", href: "#overview", icon: LayoutGrid },
      { label: "Releases", href: "#releases", icon: FileText, count: 3 },
      { label: "Announcements", href: "#announcements", icon: Bell },
      { label: "Analytics", href: "#analytics", icon: BarChart3 },
    ],
  },
  {
    title: "Workspace",
    items: [
      { label: "Members", href: "#members", icon: Users },
      { label: "Integrations", href: "#integrations", icon: Plug },
      { label: "Settings", href: "#settings", icon: Settings },
    ],
  },
  {
    title: "Help",
    items: [{ label: "Documentation", href: "#docs", icon: BookOpen }],
  },
];

function initials(name: string): string {
  return name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export function AppSidebar({
  workspace = { name: "Acme Inc.", plan: "Team plan" },
  sections = DEFAULT_SECTIONS,
  activeHref = "#releases",
  user = { name: "Maya Okafor", email: "maya@acme.dev" },
  footer,
  children,
  className,
}: AppSidebarProps) {
  const [open, setOpen] = useState(false);
  const drawerId = 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 nav = (
    <nav aria-label="Sidebar" className="flex flex-1 flex-col gap-6 overflow-y-auto px-3 py-5">
      {sections.map((section, i) => (
        <div key={section.title ?? i}>
          {section.title && (
            <p className="px-3 pb-2 font-da-mono text-[11px] font-bold tracking-da-label text-da-muted-fg uppercase">{section.title}</p>
          )}
          <ul className="flex flex-col gap-1">
            {section.items.map((item) => {
              const Icon = item.icon;
              const active = item.href === activeHref;
              return (
                <li key={item.href}>
                  <a
                    href={item.href}
                    aria-current={active ? "page" : undefined}
                    onClick={() => setOpen(false)}
                    className={cn(
                      "da-focus da-transition flex items-center gap-3 border-[length:var(--da-border-width)] px-3 py-2 font-bold",
                      active
                        ? "border-da-border bg-da-primary text-da-primary-fg shadow-da-sm"
                        : "border-transparent hover:border-da-border hover:bg-da-surface",
                    )}
                  >
                    <Icon aria-hidden className="size-5 shrink-0" strokeWidth={2.25} />
                    <span className="flex-1 truncate">{item.label}</span>
                    {item.count !== undefined && (
                      <span className="da-stroke bg-da-fg px-1.5 font-da-mono text-[11px] text-da-bg">
                        {item.count}
                        <span className="sr-only"> new</span>
                      </span>
                    )}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </nav>
  );

  const panel = (
    <>
      <div className="da-stroke-b flex items-center gap-3 px-4 py-4">
        <span aria-hidden className="da-stroke grid size-10 shrink-0 place-items-center bg-da-accent font-da-display text-lg text-da-accent-fg">
          {workspace.name[0]}
        </span>
        <div className="min-w-0">
          <p className="truncate font-bold">{workspace.name}</p>
          <p className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">{workspace.plan}</p>
        </div>
      </div>
      {nav}
      {footer ?? (
        <div className="px-3 pb-3">
          <div className="da-stroke bg-da-secondary p-4 text-da-secondary-fg">
            <p className="font-da-mono text-[11px] font-bold tracking-da-label uppercase">Usage · September</p>
            <p className="mt-1 font-bold">7 of 10 projects</p>
            <div className="da-stroke mt-3 h-3 bg-da-surface" role="progressbar" aria-valuenow={70} aria-valuemin={0} aria-valuemax={100} aria-label="Projects used">
              <div className="h-full w-[70%] bg-da-primary" />
            </div>
          </div>
        </div>
      )}
      <div className="da-stroke-t flex items-center gap-3 px-4 py-3">
        <span aria-hidden className="da-stroke grid size-9 shrink-0 place-items-center rounded-full bg-da-surface font-da-mono text-xs font-bold text-da-surface-fg">
          {initials(user.name)}
        </span>
        <div className="min-w-0 text-sm">
          <p className="truncate font-bold">{user.name}</p>
          <p className="truncate text-da-muted-fg">{user.email}</p>
        </div>
      </div>
    </>
  );

  return (
    <div className={cn("flex min-h-full bg-da-bg text-da-fg", className)}>
      {/* Desktop */}
      <aside className="da-stroke-r sticky top-0 hidden h-dvh w-64 shrink-0 flex-col bg-da-surface-2 lg:flex">{panel}</aside>

      {/* Mobile drawer */}
      {open && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <button type="button" aria-label="Close menu" onClick={() => setOpen(false)} className="absolute inset-0 bg-da-overlay" />
          <aside id={drawerId} className="da-stroke-r relative flex h-full w-72 max-w-[85vw] flex-col bg-da-surface-2 shadow-da-lg">
            <button
              type="button"
              aria-label="Close menu"
              onClick={() => setOpen(false)}
              className="da-focus da-stroke absolute top-4 -right-14 grid size-10 place-items-center bg-da-surface text-da-surface-fg"
            >
              <X aria-hidden className="size-5" />
            </button>
            {panel}
          </aside>
        </div>
      )}

      <div className="flex min-w-0 flex-1 flex-col">
        <div className="da-stroke-b flex items-center gap-3 bg-da-surface-2 px-4 py-3 lg:hidden">
          <button
            type="button"
            aria-label="Open menu"
            aria-expanded={open}
            aria-controls={drawerId}
            onClick={() => setOpen(true)}
            className="da-focus da-stroke grid size-10 place-items-center bg-da-surface text-da-surface-fg shadow-da-sm"
          >
            <Menu aria-hidden className="size-5" />
          </button>
          <p className="font-bold">{workspace.name}</p>
        </div>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}

export default AppSidebar;