Spaces:
Sleeping
Sleeping
File size: 2,461 Bytes
db75f77 | 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 | import { NavLink, useLocation } from 'react-router-dom'
import {
LayoutDashboard,
Sword,
ListTodo,
Flame,
BarChart3,
TrendingUp,
FlaskConical,
Zap,
} from 'lucide-react'
const NAV = [
{ to: '/', icon: LayoutDashboard, label: 'Dashboard' },
{ to: '/arena', icon: Sword, label: 'Episode Arena' },
{ to: '/tasks', icon: ListTodo, label: 'Task Bank' },
{ to: '/forge', icon: Flame, label: 'Forge Queue' },
{ to: '/oversight', icon: BarChart3, label: 'Oversight Stats' },
{ to: '/difficulty', icon: TrendingUp, label: 'Difficulty Curve' },
{ to: '/grader', icon: FlaskConical, label: 'Grader' },
]
export default function Sidebar() {
return (
<aside className="w-56 shrink-0 flex flex-col bg-panel border-r border-border h-screen sticky top-0">
{/* Logo */}
<div className="px-5 py-5 border-b border-border">
<div className="flex items-center gap-2">
<Zap size={18} className="text-neon" />
<span className="font-mono font-bold text-base text-neon tracking-tight">
FORGE<span className="text-primary opacity-60">+</span>ARENA
</span>
</div>
<p className="text-xs text-muted mt-1 font-mono">oversight monitor</p>
</div>
{/* Nav */}
<nav className="flex-1 py-3 overflow-y-auto">
{NAV.map(({ to, icon: Icon, label }) => (
<NavLink
key={to}
to={to}
end={to === '/'}
className={({ isActive }) =>
`flex items-center gap-3 px-5 py-2.5 text-sm transition-all group relative ${
isActive
? 'text-neon bg-neon-dark'
: 'text-secondary hover:text-primary hover:bg-card'
}`
}
>
{({ isActive }) => (
<>
{isActive && (
<span className="absolute left-0 top-0 bottom-0 w-0.5 bg-neon" />
)}
<Icon size={15} className={isActive ? 'text-neon' : 'text-muted group-hover:text-secondary'} />
<span className="font-medium tracking-wide">{label}</span>
</>
)}
</NavLink>
))}
</nav>
{/* Footer */}
<div className="px-5 py-4 border-t border-border">
<p className="text-xs text-muted font-mono">v1.0 · Qwen2.5</p>
<p className="text-xs text-muted font-mono">1.5B + 7B</p>
</div>
</aside>
)
}
|