Spaces:
Sleeping
Sleeping
File size: 3,277 Bytes
177c3f8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | "use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
LayoutDashboard,
Flag,
Beaker,
BrainCircuit,
Activity,
Settings,
} from "lucide-react";
import { motion } from "framer-motion";
const sidebarNavItems = [
{
title: "Dashboard",
href: "/",
icon: LayoutDashboard,
},
{
title: "Control",
href: "/flags",
icon: Flag,
},
{
title: "Monitoring",
href: "/monitoring",
icon: Beaker,
},
{
title: "AI Decisions",
href: "/ai-decisions",
icon: BrainCircuit,
},
{
title: "Integrations",
href: "/integrations",
icon: Activity,
},
{
title: "Settings",
href: "/settings",
icon: Settings,
},
];
export function Sidebar() {
const pathname = usePathname();
return (
<aside className="hidden md:flex w-64 flex-col border-r bg-card h-full">
<div className="p-6">
<Link href="/" className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground font-bold shadow-lg shadow-primary/20">
F
</div>
<div className="flex flex-col">
<span className="font-bold text-lg leading-none tracking-tight">FeatureFlag</span>
<span className="text-[10px] text-muted-foreground mt-1 font-medium leading-tight">
Autonomous Rollout Intelligence <br/> for Production Systems
</span>
</div>
</Link>
</div>
<nav className="flex-1 space-y-1 px-4 py-2">
{sidebarNavItems.map((item) => {
const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
return (
<Link
key={item.href}
href={item.href}
className={cn(
"group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
isActive
? "text-primary"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
)}
>
{isActive && (
<motion.div
layoutId="sidebar-active-indicator"
className="absolute inset-0 rounded-lg bg-primary/10"
initial={false}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
/>
)}
<item.icon className="h-4 w-4 relative z-10" />
<span className="relative z-10">{item.title}</span>
</Link>
);
})}
</nav>
<div className="p-4 border-t">
<div className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-muted transition-colors cursor-pointer">
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
<span className="text-xs font-semibold">SA</span>
</div>
<div className="flex flex-col">
<span className="text-sm font-medium">Soham Admin</span>
<span className="text-xs text-muted-foreground">soham@example.com</span>
</div>
</div>
</div>
</aside>
);
}
|