70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { House, Search, Settings, Sparkles, FolderKanban, ShieldCheck } from "lucide-react";
|
|
import { PRODUCT_NAME } from "@/lib/product-config";
|
|
|
|
const navItems = [
|
|
{ href: "/dashboard", label: "Dashboard", icon: House },
|
|
{ href: "/workspaces", label: "Workspaces", icon: FolderKanban },
|
|
{ href: "/reviews", label: "Reviews", icon: ShieldCheck },
|
|
{ href: "/search", label: "Search", icon: Search },
|
|
{ href: "/settings", label: "Settings", icon: Settings },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname() ?? "";
|
|
|
|
return (
|
|
<aside className="sidebar" style={{ padding: "var(--ml-space-6)" }} aria-label="Primary">
|
|
<div style={{ display: "grid", gap: "var(--ml-space-6)" }}>
|
|
<div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
|
|
<div className="badge" style={{ width: "fit-content" }}>
|
|
<Sparkles size={14} />
|
|
Web Agent workstream
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: "var(--ml-fs-xl)", fontFamily: "var(--ml-font-display)", fontWeight: 700 }}>{PRODUCT_NAME}</div>
|
|
<div style={{ color: "var(--ml-text-secondary)", marginTop: 6 }}>
|
|
Human-first notes UX with agent-safe structure and review surfaces.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav aria-label="Primary navigation" style={{ display: "grid", gap: "var(--ml-space-2)" }}>
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="surface-muted nav-link"
|
|
aria-current={active ? "page" : undefined}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "var(--ml-space-3)",
|
|
padding: "12px 14px",
|
|
borderColor: active ? "var(--ml-accent-primary)" : undefined,
|
|
background: active ? "rgba(90, 140, 255, 0.16)" : undefined,
|
|
}}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-2)" }}>
|
|
<strong>Keyboard flow</strong>
|
|
<span style={{ color: "var(--ml-text-secondary)" }}>Use Tab to move between navigation, filters, and dense result surfaces.</span>
|
|
<span style={{ color: "var(--ml-text-secondary)" }}>Use the skip link to jump directly into page content.</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|