37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { Link, useLocation } from "react-router";
|
|
|
|
const navItems = [{ route: "/", label: "Explorer", icon: "home" }];
|
|
|
|
export function Sidebar() {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<aside className="lg:col-span-3">
|
|
<nav className="space-y-1">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.route}
|
|
to={item.route}
|
|
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
|
|
location.pathname === item.route
|
|
? "bg-blue-50 text-blue-700 border border-blue-100"
|
|
: "text-slate-600 hover:bg-slate-100"
|
|
}`}
|
|
>
|
|
<img
|
|
src={
|
|
location.pathname === item.route
|
|
? `https://img.icons8.com/ios-filled/50/2563eb/${item.icon}.png`
|
|
: `https://img.icons8.com/ios/50/64748b/${item.icon}.png`
|
|
}
|
|
className="w-5 h-5 shrink-0 object-contain"
|
|
alt={item.label}
|
|
/>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|