Spaces:
Running on Zero
Running on Zero
| // components/Sidebar.jsx | |
| import { NavLink } from 'react-router-dom' | |
| import { | |
| LayoutDashboard, Radio, Brain, ShieldAlert, Eye, | |
| ScrollText, BarChart3, Activity, Settings, ChevronLeft, ChevronRight | |
| } from 'lucide-react' | |
| const NAV = [ | |
| { label: 'Main', items: [ | |
| { to: '/', icon: LayoutDashboard, label: 'Dashboard' }, | |
| { to: '/junctions', icon: Radio, label: 'Live Junctions' }, | |
| { to: '/decisions', icon: Brain, label: 'AI Decisions' }, | |
| { to: '/safety', icon: ShieldAlert, label: 'Safety & Emergency' }, | |
| { to: '/perception', icon: Eye, label: 'Perception & Risk' }, | |
| { to: '/logs', icon: ScrollText, label: 'System Logs' }, | |
| { to: '/metrics', icon: BarChart3, label: 'Performance Metrics' }, | |
| ]}, | |
| { label: 'System', items: [ | |
| { to: '/system', icon: Activity, label: 'System Status' }, | |
| { to: '/config', icon: Settings, label: 'Configuration' }, | |
| ]}, | |
| ] | |
| export default function Sidebar({ collapsed, onToggle }) { | |
| return ( | |
| <aside className={` | |
| fixed left-0 top-0 z-30 hidden h-full flex-col | |
| border-r border-slate-700/60 bg-slate-950/95 shadow-2xl shadow-slate-950/40 backdrop-blur md:flex | |
| transition-all duration-200 | |
| ${collapsed ? 'w-14' : 'w-56'} | |
| `}> | |
| <div className="flex min-h-16 items-center gap-2 border-b border-slate-700/50 px-3 py-4"> | |
| <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-cyan-400/30 bg-cyan-400/10 text-cyan-300"> | |
| <Radio className="h-4 w-4" /> | |
| </div> | |
| {!collapsed && ( | |
| <div className="overflow-hidden"> | |
| <p className="text-xs font-bold leading-tight text-white">AI TRAFFIC</p> | |
| <p className="text-xs leading-tight text-slate-400">Operations</p> | |
| </div> | |
| )} | |
| </div> | |
| <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-4"> | |
| {NAV.map(section => ( | |
| <div key={section.label}> | |
| {!collapsed && ( | |
| <p className="mb-1 px-2 text-[11px] font-semibold uppercase text-slate-500"> | |
| {section.label} | |
| </p> | |
| )} | |
| <ul className="space-y-0.5"> | |
| {section.items.map(({ to, icon: Icon, label }) => ( | |
| <li key={to}> | |
| <NavLink | |
| to={to} | |
| end={to === '/'} | |
| className={({ isActive }) => ` | |
| flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm transition-colors | |
| ${isActive | |
| ? 'border border-cyan-400/25 bg-cyan-400/10 text-cyan-200' | |
| : 'text-slate-400 hover:bg-slate-800/80 hover:text-slate-200'} | |
| `} | |
| title={collapsed ? label : undefined} | |
| > | |
| <Icon className="w-4 h-4 flex-shrink-0" /> | |
| {!collapsed && <span className="truncate">{label}</span>} | |
| </NavLink> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| ))} | |
| </nav> | |
| <button | |
| onClick={onToggle} | |
| className="flex items-center justify-center border-t border-slate-700/50 p-3 text-slate-500 transition-colors hover:text-slate-300" | |
| title={collapsed ? 'Expand navigation' : 'Collapse navigation'} | |
| > | |
| {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />} | |
| </button> | |
| </aside> | |
| ) | |
| } | |