`src/components/layout/Sidebar.tsx`

73 lines
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

const navItems = [
  { href: "/", label: "System Health", icon: "H" },
  { href: "/terminal", label: "Trading Terminal", icon: "T", accent: true },
  { href: "/jobs", label: "Job Runs", icon: "J" },
  { href: "/sources", label: "Source Catalog", icon: "S" },
  { href: "/msrp", label: "MSRP Changes", icon: "M" },
  { href: "/models", label: "Model Dashboard", icon: "D" },
  { href: "/quarantine", label: "Quarantine Queue", icon: "Q" },
  { href: "/entity-resolution", label: "Entity Resolution", icon: "E" },
  { href: "/snapshots", label: "Raw Snapshots", icon: "R" },
  { href: "/audit", label: "Audit Log", icon: "A" },
  { href: "/alerts", label: "Price Alerts", icon: "!" },
  { href: "/condition-mappings", label: "Condition Map", icon: "G" },
  { href: "/settings", label: "Access Control", icon: "C" },
  { href: "/api-docs", label: "API Docs", icon: "?" },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="flex h-screen w-64 flex-col border-r border-navy-700 bg-navy-950">
      <div className="border-b border-navy-700 p-4">
        <div className="text-xl font-bold text-omega-400">OMEGA</div>
        <div className="text-[10px] tracking-[0.2em] text-gray-500">
          WATCHES 2.0 CONTROL PLANE
        </div>
      </div>
      <nav className="flex-1 overflow-y-auto p-2">
        {navItems.map((item) => {
          const isActive =
            pathname === item.href ||
            (item.href !== "/" && pathname.startsWith(item.href));
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "mb-0.5 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
                isActive
                  ? "bg-omega-500/10 text-omega-400"
                  : "text-gray-400 hover:bg-navy-800 hover:text-gray-200"
              )}
            >
              <span
                className={cn(
                  "flex h-6 w-6 items-center justify-center rounded text-xs font-bold",
                  isActive
                    ? (item as any).accent ? "bg-[#722F37] text-white" : "bg-omega-500 text-white"
                    : (item as any).accent ? "bg-[#722F37]/30 text-[#C89B3C]" : "bg-navy-800 text-gray-500"
                )}
              >
                {item.icon}
              </span>
              {item.label}
            </Link>
          );
        })}
      </nav>
      <div className="border-t border-navy-700 p-3">
        <div className="text-xs text-gray-500">v2.0.0 Enterprise</div>
        <div className="text-xs text-gray-600">Dual-Ledger Architecture</div>
      </div>
    </aside>
  );
}