62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { NavLink } from 'react-router-dom'
|
|
import {
|
|
LayoutDashboard,
|
|
Blocks,
|
|
Brain,
|
|
Archive,
|
|
ScrollText,
|
|
Settings,
|
|
Plus
|
|
} from 'lucide-react'
|
|
import { clsx } from 'clsx'
|
|
|
|
const navItems = [
|
|
{ to: '/', icon: LayoutDashboard, label: 'Overview' },
|
|
{ to: '/skills', icon: Blocks, label: 'Skills' },
|
|
{ to: '/memory', icon: Brain, label: 'Memory' },
|
|
{ to: '/backups', icon: Archive, label: 'Backups' },
|
|
{ to: '/logs', icon: ScrollText, label: 'Logs' },
|
|
{ to: '/settings', icon: Settings, label: 'Settings' },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
return (
|
|
<aside className="w-56 bg-gray-900 border-r border-gray-800 flex flex-col">
|
|
<div className="p-4 border-b border-gray-800">
|
|
<h1 className="text-xl font-bold text-white flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg" />
|
|
VibeStack
|
|
</h1>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-3 space-y-1">
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
end={item.to === '/'}
|
|
className={({ isActive }) =>
|
|
clsx(
|
|
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-gray-800 text-white'
|
|
: 'text-gray-400 hover:text-white hover:bg-gray-800/50'
|
|
)
|
|
}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-3 border-t border-gray-800">
|
|
<button className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800/50 transition-colors">
|
|
<Plus className="w-4 h-4" />
|
|
Add Skill
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|