App Sidebar

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface AppSidebarProps {
  brand?: string;
  site?: string;
  groups?: { label: string; items: { label: string; href: string; count?: number }[] }[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_GROUPS = [
  {
    label: "Site",
    items: [
      { label: "Projects", href: "#projects", count: 24 },
      { label: "Pages", href: "#pages", count: 6 },
      { label: "Media", href: "#media", count: 412 },
    ],
  },
  {
    label: "Design",
    items: [
      { label: "Template", href: "#template" },
      { label: "Typography", href: "#type" },
      { label: "Colors", href: "#colors" },
    ],
  },
  {
    label: "Settings",
    items: [
      { label: "Domain", href: "#domain" },
      { label: "Analytics", href: "#analytics" },
      { label: "Billing", href: "#billing" },
    ],
  },
];

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Typographic app sidebar: hairline right border, logo + site switcher, mono group labels, plain text links with right-aligned mono counts; the active link is ink with a signal dot; drawer on mobile. */
export function AppSidebar({ brand = "Frame", site = "nord.studio", groups = DEFAULT_GROUPS, activeHref = "#projects", 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]);
  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}
        aria-label="Sidebar"
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-da-border bg-da-bg px-5 py-5 transition-transform duration-(--da-duration) 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 font-da-display text-lg font-semibold tracking-da-display">
          <FrameMark />
          {brand}
          <button
            type="button"
            onClick={() => setOpen(false)}
            className="da-focus ml-auto rounded-da-sm font-da-mono text-xs font-normal tracking-da-label uppercase lg:hidden"
          >
            Close
          </button>
        </div>
        <button
          type="button"
          className="da-focus mt-6 flex items-center justify-between border border-da-border px-3 py-2 text-left text-sm hover:border-da-border-strong"
        >
          <span>
            <span className="block font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">Site</span>
            {site}
          </span>
          <span aria-hidden>↕</span>
        </button>
        <nav aria-label="Main" className="mt-8 flex-1 space-y-8 overflow-y-auto">
          {groups.map((g) => (
            <div key={g.label}>
              <p className="font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">{g.label}</p>
              <ul className="mt-2">
                {g.items.map((it) => {
                  const on = it.href === activeHref;
                  return (
                    <li key={it.href}>
                      <a
                        href={it.href}
                        aria-current={on ? "page" : undefined}
                        className={cn(
                          "da-focus flex items-center gap-2 rounded-da-sm py-1.5 text-[15px]",
                          on ? "text-da-fg" : "text-da-muted-fg hover:text-da-fg",
                        )}
                      >
                        {on && <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />}
                        <span className="flex-1">{it.label}</span>
                        {it.count !== undefined && <span className="font-da-mono text-[11px] text-da-muted-fg">{it.count}</span>}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </nav>
        <p className="border-t border-da-border pt-4 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">Ingrid S. · Studio plan</p>
      </aside>
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-14 items-center justify-between border-b border-da-border px-4 lg:hidden">
          <span className="font-da-display font-semibold tracking-da-display">{brand}</span>
          <button
            type="button"
            aria-expanded={open}
            aria-controls={id}
            onClick={() => setOpen(true)}
            className="da-focus rounded-da-sm font-da-mono text-xs tracking-da-label uppercase"
          >
            Menu
          </button>
        </div>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}

export default AppSidebar;