"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
LayoutDashboard,
FileText,
ClipboardList,
BarChart3,
Database,
Settings,
Network,
Activity,
} from "lucide-react";
const navItems = [
{ href: "/dashboard/overview", label: "Overview", icon: LayoutDashboard },
{ href: "/dashboard/documents", label: "Documents", icon: FileText },
{ href: "/dashboard/audit", label: "Audit Log", icon: ClipboardList },
{ href: "/dashboard/metrics", label: "Metrics", icon: BarChart3 },
{ href: "/dashboard/cache", label: "Cache", icon: Database },
{ href: "/dashboard/config", label: "Config", icon: Settings },
{ href: "/dashboard/proxy", label: "Proxy", icon: Network },
];
export function Sidebar() {
const pathname = usePathname();
return (
<aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
<div className="flex h-16 items-center gap-2 border-b border-zinc-200 px-6 dark:border-zinc-800">
<Activity className="h-6 w-6 text-blue-600" />
<span className="font-bold text-lg">Context Hub</span>
</div>
<nav className="space-y-1 p-4">
{navItems.map((item) => {
const active = pathname.startsWith(item.href);
return (
<Link
key={item.href}
href={item.href}
className={cn(
"flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
active
? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50"
: "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-50"
)}
>
<item.icon size={18} />
{item.label}
</Link>
);
})}
</nav>
</aside>
);
}
