42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Link, useLocation } from "react-router";
|
|
|
|
const navItems = [
|
|
{ route: "/", label: "Explorer", icon: "home" },
|
|
{ route: "/status", label: "Status", icon: "notepad" },
|
|
{ route: "/transfer", label: "Transfer", icon: "money" },
|
|
{ route: "/auction", label: "Auction", icon: "auction" }
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|