import { Link, useLocation } from 'react-router-dom'
import {
LayoutDashboard,
GitBranch,
Search,
Database,
Network,
FileCode
} from 'lucide-react'
const menuItems = [
{ path: '/', label: 'Overview', icon: LayoutDashboard },
{ path: '/diagrams', label: 'Diagrams', icon: Network },
{ path: '/pr-impact', label: 'PR Impact', icon: GitBranch },
{ path: '/queries', label: 'Queries', icon: Search },
{ path: '/extraction', label: 'Extraction', icon: Database },
{ path: '/types', label: 'Type Explorer', icon: FileCode },
]
export default function Sidebar() {
const location = useLocation()
return (
<aside className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
<div className="p-4 border-b border-gray-700">
<h2 className="text-lg font-semibold">Navigation</h2>
</div>
<nav className="flex-1 p-4">
<ul className="space-y-2">
{menuItems.map((item) => {
const Icon = item.icon
const isActive = location.pathname === item.path
return (
<li key={item.path}>
<Link
to={item.path}
className={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors ${
isActive
? 'bg-blue-600 text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white'
}`}
>
<Icon size={20} />
<span>{item.label}</span>
</Link>
</li>
)
})}
</ul>
</nav>
</aside>
)
}
export { Sidebar }
