"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { docsNav } from "@/lib/docs-nav";
import { ScrollArea } from "@/components/ui/scroll-area";
export function DocsSidebar() {
const pathname = usePathname();
return (
<aside className="sticky top-14 hidden h-[calc(100dvh-3.5rem)] w-64 shrink-0 border-r border-border/50 lg:block">
<ScrollArea className="h-full py-6 pr-4">
<nav className="flex flex-col gap-6">
{docsNav.map((group) => (
<div key={group.title}>
<p className="mb-1.5 px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{group.title}
</p>
<ul className="flex flex-col gap-0.5">
{group.items.map((item) => {
// A Build-C detailed variant (`.../detailed/`) highlights its
// base entry, which is the only one in the nav.
const active =
pathname === item.href ||
pathname === `${item.href}detailed/`;
return (
<li key={item.href}>
<Link
href={item.href}
className={cn(
"block rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
active &&
"bg-accent font-medium text-foreground before:mr-2 before:text-primary",
)}
>
{item.title}
</Link>
</li>
);
})}
</ul>
</div>
))}
</nav>
</ScrollArea>
</aside>
);
}