48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import {
|
|
CreditCard,
|
|
FolderTree,
|
|
Import,
|
|
LayoutDashboard,
|
|
Settings,
|
|
Wallet,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const links = [
|
|
{ to: "/", label: "Übersicht", icon: LayoutDashboard },
|
|
{ to: "/transaktionen", label: "Transaktionen", icon: Wallet },
|
|
{ to: "/kategorien", label: "Kategorien", icon: FolderTree },
|
|
{ to: "/kredite", label: "Kredite", icon: CreditCard },
|
|
{ to: "/import", label: "CSV & comdirect", icon: Import },
|
|
{ to: "/einstellungen", label: "Einstellungen", icon: Settings },
|
|
];
|
|
|
|
export function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
|
|
return (
|
|
<nav className="flex flex-col gap-1 p-4">
|
|
<div className="mb-4 px-2">
|
|
<h1 className="text-lg font-bold">Finanz-Dashboard</h1>
|
|
<p className="text-xs text-muted-foreground">Persönliche Finanzverwaltung</p>
|
|
</div>
|
|
{links.map(({ to, label, icon: Icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={to === "/"}
|
|
onClick={onNavigate}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
|
|
isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted",
|
|
)
|
|
}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|