110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
'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' },
|
|
reporting: { title: 'Reporting', crumb: 'Übersicht / Reporting' },
|
|
crm: { title: 'CRM', crumb: 'Vertrieb / CRM' },
|
|
leads: { title: 'Leads Finder', crumb: 'Vertrieb / Leads' },
|
|
estimates: { title: 'Angebote', crumb: 'Vertrieb / Angebote' },
|
|
projects: { title: 'Projekte', crumb: 'Lieferung / Projekte' },
|
|
support: { title: 'Support', crumb: 'Lieferung / Tickets' },
|
|
licenses: { title: 'Lizenzen', crumb: 'Betrieb / Lizenzen' },
|
|
contracts: { title: 'Verträge', crumb: 'Betrieb / Verträge' },
|
|
expenses: { title: 'Ausgaben', crumb: 'Betrieb / Ausgaben' },
|
|
finance: { title: 'Finanzen', crumb: 'Betrieb / Finanzen' },
|
|
accounting: { title: 'Buchhaltung', crumb: 'Betrieb / Buchhaltung' },
|
|
audit: { title: 'Audit-Protokoll', crumb: 'Betrieb / Audit' },
|
|
settings: { title: 'Erweiterungen', crumb: 'System / Module' },
|
|
setup: { title: 'Setup-Wizard', crumb: 'System / Setup' },
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|