Sidebar Ink

"use client";

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

export interface SidebarInkProps {
  brand?: string;
  items?: { label: string; href: string }[];
  activeHref?: string;
  usage?: { label: string; used: number; total: number };
  children?: ReactNode;
  className?: string;
}

const DEFAULT_ITEMS = [
  { label: "Overview", href: "#overview" },
  { label: "Projects", href: "#projects" },
  { label: "Pages", href: "#pages" },
  { label: "Media", href: "#media" },
  { label: "Analytics", href: "#analytics" },
  { label: "Settings", href: "#settings" },
];

/** Ink sidebar (stays near-black in dark mode): giant numbered text links “01 Overview”, the active one full white with an arrow, a storage meter as a hairline bar at the bottom; drawer on mobile. */
export function SidebarInk({
  brand = "Frame",
  items = DEFAULT_ITEMS,
  activeHref = "#projects",
  usage = { label: "Storage", used: 6.2, total: 20 },
  children,
  className,
}: SidebarInkProps) {
  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-72 flex-col bg-(--ink) p-6 text-(--paper) transition-transform duration-(--da-duration) ease-da [--ink:var(--da-fg)] [--paper:var(--da-bg)] lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0 motion-reduce:transition-none dark:border-r dark:border-da-border dark:[--ink:var(--da-surface)] dark:[--paper:var(--da-fg)]",
          open ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <div className="flex items-center justify-between">
          <span className="font-da-display text-xl font-semibold tracking-da-display">
            {brand.toLowerCase()}
            <span className="text-da-accent">.</span>
          </span>
          <button type="button" onClick={() => setOpen(false)} className="da-focus rounded-da-sm font-da-mono text-xs tracking-da-label uppercase lg:hidden">
            Close
          </button>
        </div>
        <nav aria-label="Main" className="mt-14 flex-1">
          <ul className="space-y-1">
            {items.map((it, i) => {
              const on = it.href === activeHref;
              return (
                <li key={it.href}>
                  <a
                    href={it.href}
                    aria-current={on ? "page" : undefined}
                    className={cn(
                      "group da-focus flex items-baseline gap-3 rounded-da-sm py-1 font-da-display text-2xl font-medium tracking-da-display transition-opacity",
                      on ? "opacity-100" : "opacity-45 hover:opacity-100",
                    )}
                  >
                    <span className="font-da-mono text-[11px] tracking-normal">{String(i + 1).padStart(2, "0")}</span>
                    {it.label}
                    {on && (
                      <span aria-hidden className="ml-auto text-base">
                        →
                      </span>
                    )}
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
        <div>
          <p className="flex justify-between font-da-mono text-[10px] tracking-da-label uppercase opacity-70">
            <span>{usage.label}</span>
            <span>
              {usage.used} / {usage.total} GB
            </span>
          </p>
          <div
            role="progressbar"
            aria-label={usage.label}
            aria-valuemin={0}
            aria-valuemax={usage.total}
            aria-valuenow={usage.used}
            className="mt-2 h-px bg-(--paper)/25"
          >
            <div className="h-full bg-(--paper)" style={{ width: `${(usage.used / usage.total) * 100}%` }} />
          </div>
        </div>
      </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 SidebarInk;