62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { clsx } from 'clsx'
|
|
import { LayoutDashboard, Users, Newspaper, Calendar, GraduationCap, Settings } from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', label: 'Übersicht', icon: LayoutDashboard },
|
|
{ href: '/dashboard/mitglieder', label: 'Mitglieder', icon: Users },
|
|
{ href: '/dashboard/news', label: 'News', icon: Newspaper },
|
|
{ href: '/dashboard/termine', label: 'Termine', icon: Calendar },
|
|
{ href: '/dashboard/stellen', label: 'Lehrlingsbörse', icon: GraduationCap },
|
|
{ href: '/dashboard/einstellungen', label: 'Einstellungen', icon: Settings },
|
|
]
|
|
|
|
export function Sidebar({ orgName, logoUrl }: { orgName?: string; logoUrl?: string | null }) {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside className="w-64 bg-white border-r flex flex-col flex-shrink-0">
|
|
{/* Logo */}
|
|
<div className="px-6 py-5 border-b flex items-center gap-3">
|
|
<Link href="/dashboard" className="flex items-center gap-3 w-full">
|
|
{logoUrl ? (
|
|
<img src={logoUrl} alt={orgName || 'Logo'} className="h-8 max-w-[120px] object-contain" />
|
|
) : (
|
|
<span
|
|
className="text-xl font-bold text-gray-900 tracking-tight leading-tight line-clamp-2"
|
|
style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
|
|
>
|
|
{orgName || <span>Innungs<span className="text-brand-500">App</span></span>}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-3 space-y-0.5">
|
|
{navItems.map((item) => {
|
|
const isActive =
|
|
item.href === '/dashboard'
|
|
? pathname === '/dashboard'
|
|
: pathname.startsWith(item.href)
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={clsx('sidebar-link', isActive && 'sidebar-link-active')}
|
|
>
|
|
<Icon size={16} className="flex-shrink-0" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|