Spaces:
Running on Zero
Running on Zero
File size: 3,456 Bytes
f234112 32b6488 f234112 32b6488 f234112 32b6488 f234112 32b6488 f234112 32b6488 f234112 32b6488 f234112 32b6488 f234112 | 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 | // 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>
)
}
|