Spaces:
Running
Running
File size: 2,729 Bytes
24f95f0 | 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 | 'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, FolderOpen, FlaskConical, Terminal, Settings, Shield } from 'lucide-react';
import { motion } from 'framer-motion';
const navItems = [
{ href: '/', label: 'Overview', icon: Home },
{ href: '/cases', label: 'Cases', icon: FolderOpen },
{ href: '/simulation', label: 'Simulations', icon: FlaskConical },
{ href: '/sentinel', label: 'Sentinel', icon: Shield },
{ href: '/prompts', label: 'Prompt Lab', icon: Terminal },
{ href: '/config', label: 'Config', icon: Settings },
];
export default function JanusSidebar() {
const pathname = usePathname();
return (
<nav className="fixed top-0 left-0 right-0 h-12 z-40 flex items-center px-6 border-b border-white/[0.04] bg-gray-950/80 backdrop-blur-xl">
{/* Logo */}
<div className="flex items-center gap-2.5 mr-8">
<div className="w-2 h-2 rounded-full bg-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.6)] animate-pulse" />
<span className="font-light tracking-[0.25em] text-[11px] text-gradient-subtle uppercase">JANUS.OS</span>
</div>
{/* Nav items */}
<div className="flex items-center gap-1 flex-1">
{navItems.map((item) => {
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
return (
<Link
key={item.href}
href={item.href}
className={`relative flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all duration-200 text-[11px] font-mono uppercase tracking-wider ${
isActive ? 'text-white' : 'text-gray-500 hover:text-gray-300'
}`}
>
{isActive && (
<motion.div
layoutId="topNavActive"
className="absolute inset-0 bg-white/[0.06] rounded-lg border border-white/[0.08]"
transition={{ type: 'spring', bounce: 0.15, duration: 0.4 }}
/>
)}
<item.icon size={13} className={`relative z-10 ${isActive ? 'text-indigo-400' : ''}`} aria-hidden />
<span className="relative z-10">{item.label}</span>
</Link>
);
})}
</div>
{/* Status dot */}
<div className="flex items-center gap-2">
<div className="relative">
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
<div className="absolute inset-0 w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping opacity-40" />
</div>
<span className="text-[9px] font-mono text-emerald-400/60 uppercase tracking-widest">Active</span>
</div>
</nav>
);
}
|