b6167bcb-7363-4695-9481-addd81de4367

2026-10-26 13:40:52 +00:00
1 parent fdc3b82d10
commit d226dabba3
@@ -0,0 +1,101 @@
+'use client'
+
+import { Menu, Search, Bell, ChevronRight } from 'lucide-react'
+import { useAos, type ViewId } from '@/store/aos'
+import { ThemeToggle } from '@/components/theme-toggle'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+const TITLES: Record<ViewId, { title: string; crumb: string }> = {
+  dashboard: { title: 'Dashboard', crumb: 'Übersicht' },
+  crm: { title: 'CRM', crumb: 'Vertrieb / CRM' },
+  leads: { title: 'Leads Finder', crumb: 'Vertrieb / Leads' },
+  projects: { title: 'Projekte', crumb: 'Lieferung / Projekte' },
+  licenses: { title: 'Lizenzen', crumb: 'Betrieb / Lizenzen' },
+  finance: { title: 'Finanzen', crumb: 'Betrieb / Finanzen' },
+  settings: { title: 'Erweiterungen', crumb: 'System / Module' },
+}
+
+export function TopBar() {
+  const { view, setSidebarOpen, setCommandOpen } = useAos()
+  const meta = TITLES[view]
+  const crumbParts = meta.crumb.split(' / ')
+
+  return (
+    <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur-md md:px-6">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="md:hidden"
+        onClick={() => setSidebarOpen(true)}
+        aria-label="Menü öffnen"
+      >
+        <Menu className="size-5" />
+      </Button>
+
+      {/* Breadcrumb */}
+      <div className="flex min-w-0 items-center gap-1.5 text-sm">
+        <span className="hidden text-muted-foreground sm:inline">{crumbParts[0]}</span>
+        {crumbParts.length > 1 && (
+          <>
+            <ChevronRight className="hidden size-3.5 text-muted-foreground/50 sm:inline" />
+            <span className="truncate font-medium">{crumbParts[1]}</span>
+          </>
+        )}
+      </div>
+
+      <div className="ml-auto flex items-center gap-1.5">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="hidden gap-2 text-muted-foreground md:flex"
+          onClick={() => setCommandOpen(true)}
+        >
+          <Search className="size-3.5" />
+          <span className="text-xs">Suchen</span>
+        </Button>
+
+        <ThemeToggle />
+
+        <Button variant="ghost" size="icon" className="relative" aria-label="Benachrichtigungen">
+          <Bell className="size-4" />
+          <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-foreground" />
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="gap-2 px-1.5">
+              <Avatar className="size-8">
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs">MB</AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="flex flex-col">
+              <span className="text-sm font-medium">Max Brandt</span>
+              <span className="text-xs text-muted-foreground">max@nordlicht.digital</span>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="flex items-center justify-between">
+              <span>Rolle</span>
+              <Badge variant="outline" className="text-[10px]">Owner</Badge>
+            </DropdownMenuItem>
+            <DropdownMenuItem>Profil</DropdownMenuItem>
+            <DropdownMenuItem>Sitzungen</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-muted-foreground">Abmelden</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}