initial commit

src/components/layout/Sidebar.tsx

@@ -0,0 +1,47 @@
+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>
+  );
+}