Sidebar Tree

"use client";

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

export interface TreeNode {
  label: string;
  href: string;
  children?: TreeNode[];
}

export interface SidebarTreeProps {
  brand?: string;
  tree?: TreeNode[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_TREE: TreeNode[] = [
  { label: "Home", href: "#home" },
  {
    label: "Work",
    href: "#work",
    children: [
      { label: "Oslo Opera", href: "#oslo" },
      { label: "Kiln Coffee", href: "#kiln" },
      { label: "Moss", href: "#moss" },
    ],
  },
  {
    label: "About",
    href: "#about",
    children: [
      { label: "Team", href: "#team" },
      { label: "Clients", href: "#clients" },
    ],
  },
  { label: "Journal", href: "#journal" },
  { label: "Contact", href: "#contact" },
];

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>
  );
}

/** CMS page tree: nested pages drawn with hairline guide lines and +/− toggles (aria-expanded), mono “Pages” header with an add button; active page ink with signal dot; drawer on mobile. */
export function SidebarTree({ brand = "Frame", tree = DEFAULT_TREE, activeHref = "#oslo", children, className }: SidebarTreeProps) {
  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 [openNodes, setOpenNodes] = useState<string[]>(["#work"]);
  const toggle = (h: string) => setOpenNodes((o) => (o.includes(h) ? o.filter((x) => x !== h) : [...o, h]));
  const render = (nodes: TreeNode[], depth: number) => (
    <ul role={depth ? "group" : "tree"} aria-label={depth ? undefined : "Pages"} className={cn(depth > 0 && "ml-3 border-l border-da-border pl-3")}>
      {nodes.map((n) => {
        const on = n.href === activeHref;
        const expanded = openNodes.includes(n.href);
        return (
          <li key={n.href} role="treeitem" aria-expanded={n.children ? expanded : undefined} aria-selected={on}>
            <div className="flex items-center gap-1">
              {n.children ? (
                <button
                  type="button"
                  onClick={() => toggle(n.href)}
                  aria-label={`${expanded ? "Collapse" : "Expand"} ${n.label}`}
                  className="da-focus grid size-5 place-items-center rounded-da-sm font-da-mono text-xs text-da-muted-fg hover:text-da-fg"
                >
                  {expanded ? "−" : "+"}
                </button>
              ) : (
                <span aria-hidden className="size-5" />
              )}
              <a
                href={n.href}
                aria-current={on ? "page" : undefined}
                className={cn(
                  "da-focus flex flex-1 items-center gap-2 rounded-da-sm py-1 text-[15px]",
                  on ? "text-da-fg" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {n.label}
                {on && <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />}
              </a>
            </div>
            {n.children && expanded && render(n.children, depth + 1)}
          </li>
        );
      })}
    </ul>
  );
  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 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 h-14 items-center gap-2.5 border-b border-da-border px-4 font-da-display font-semibold tracking-da-display">
          <FrameMark className="size-5" />
          {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>
        <div className="flex items-center justify-between px-4 pt-5 pb-2">
          <p className="font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">Pages</p>
          <button
            type="button"
            aria-label="Add page"
            className="da-focus grid size-6 place-items-center rounded-da-sm border border-da-border font-da-mono text-sm hover:border-da-border-strong"
          >
            +
          </button>
        </div>
        <nav aria-label="Pages" className="flex-1 overflow-y-auto px-3 pb-4">
          {render(tree, 0)}
        </nav>
      </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 SidebarTree;