ADD: added first working version

app/components/layout/sidebar.tsx

@@ -1,13 +1,6 @@
 import { Link, Form, useLocation } from "react-router";
-import {
-  Calculator,
-  Building2,
-  LayoutDashboard,
-  LogOut,
-  ChevronRight,
-} from "lucide-react";
+import { Calculator, Building2, LayoutDashboard, LogOut, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 
 interface NavItem {
   label: string;
@@ -20,57 +13,91 @@ const navItems: NavItem[] = [
   { label: "Mandanten", href: "/companies", icon: <Building2 className="h-4 w-4" /> },
 ];
 
+function getInitials(name?: string | null): string {
+  if (!name) return "?";
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+
 export function Sidebar({ userName }: { userName?: string | null }) {
   const location = useLocation();
   const pathname = location.pathname;
 
   return (
-    <aside className="w-60 shrink-0 flex flex-col bg-white border-r border-gray-200 min-h-screen">
-      <div className="flex items-center gap-3 px-4 py-5 border-b border-gray-200">
-        <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600">
+    <aside
+      className="fixed inset-y-0 left-0 z-20 flex flex-col"
+      style={{ width: "var(--sidebar-width)", background: "#0f172a", borderRight: "1px solid #1e293b" }}
+    >
+      {/* Logo */}
+      <div className="flex items-center gap-3 px-5 py-5" style={{ borderBottom: "1px solid #1e293b" }}>
+        <div
+          className="flex items-center justify-center w-9 h-9 rounded-xl"
+          style={{ background: "linear-gradient(135deg, #6366f1, #7c3aed)", boxShadow: "0 4px 12px rgba(99,102,241,0.3)" }}
+        >
           <Calculator className="w-4 h-4 text-white" />
         </div>
-        <span className="font-semibold text-gray-900 text-sm leading-tight">
-          Rechnungs-<br />manager
-        </span>
+        <div>
+          <span className="font-semibold text-sm leading-tight block" style={{ color: "#f1f5f9" }}>
+            Rechnungsmanager
+          </span>
+          <span className="text-xs" style={{ color: "#475569" }}>Buchhaltung</span>
+        </div>
       </div>
 
-      <nav className="flex-1 px-3 py-4 space-y-0.5">
+      {/* Navigation */}
+      <nav className="flex-1 px-3 py-5" style={{ overflowY: "auto" }}>
+        <p className="text-xs font-semibold uppercase tracking-wider px-3 mb-2" style={{ color: "#334155" }}>
+          Navigation
+        </p>
         {navItems.map((item) => {
-          const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
+          const active =
+            pathname === item.href ||
+            (item.href !== "/" && pathname.startsWith(item.href));
           return (
             <Link
               key={item.href}
               to={item.href}
               className={cn(
-                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-                active
-                  ? "bg-indigo-50 text-indigo-700"
-                  : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors mb-0.5",
               )}
+              style={
+                active
+                  ? { background: "#4f46e5", color: "#ffffff" }
+                  : { color: "#94a3b8" }
+              }
             >
               {item.icon}
               {item.label}
-              {active && <ChevronRight className="ml-auto h-3 w-3 text-indigo-400" />}
+              {active && <ChevronRight className="ml-auto h-3.5 w-3.5" style={{ color: "#a5b4fc" }} />}
             </Link>
           );
         })}
       </nav>
 
-      <div className="px-3 py-4 border-t border-gray-200">
-        {userName && (
-          <p className="text-xs text-gray-500 px-3 mb-2 truncate">{userName}</p>
-        )}
+      {/* User section */}
+      <div className="px-3 py-4" style={{ borderTop: "1px solid #1e293b" }}>
+        <div
+          className="flex items-center gap-3 px-3 py-2.5 rounded-lg mb-2"
+          style={{ background: "#1e293b" }}
+        >
+          <div
+            className="flex items-center justify-center w-7 h-7 rounded-full text-white text-xs font-bold shrink-0"
+            style={{ background: "linear-gradient(135deg, #818cf8, #7c3aed)" }}
+          >
+            {getInitials(userName)}
+          </div>
+          {userName && (
+            <p className="text-sm font-medium truncate" style={{ color: "#cbd5e1" }}>{userName}</p>
+          )}
+        </div>
         <Form method="post" action="/logout">
-          <Button
+          <button
             type="submit"
-            variant="ghost"
-            size="sm"
-            className="w-full justify-start text-gray-600 hover:text-red-600 hover:bg-red-50"
+            className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium"
+            style={{ color: "#64748b" }}
           >
             <LogOut className="h-4 w-4" />
             Abmelden
-          </Button>
+          </button>
         </Form>
       </div>
     </aside>