53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
LayoutDashboard,
|
|
Database,
|
|
Workflow,
|
|
ScrollText,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const NAV = [
|
|
{ href: "/", label: "Dashboard", icon: LayoutDashboard },
|
|
{ href: "/connections", label: "Connections", icon: Database },
|
|
{ href: "/pipelines", label: "Pipelines", icon: Workflow },
|
|
{ href: "/runs", label: "Runs", icon: ScrollText },
|
|
];
|
|
|
|
export function AppSidebar() {
|
|
const pathname = usePathname();
|
|
return (
|
|
<aside className="flex w-52 shrink-0 flex-col border-r bg-muted/30">
|
|
<div className="flex h-14 items-center border-b px-4">
|
|
<span className="font-mono text-sm font-semibold tracking-tight">
|
|
sling-ui
|
|
</span>
|
|
</div>
|
|
<nav className="flex flex-col gap-1 p-2">
|
|
{NAV.map(({ href, label, icon: Icon }) => {
|
|
const active =
|
|
href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
|
|
active
|
|
? "bg-accent font-medium text-accent-foreground"
|
|
: "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|