59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { clsx } from 'clsx'
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', label: 'Übersicht', icon: '🏠' },
|
|
{ href: '/dashboard/mitglieder', label: 'Mitglieder', icon: '👥' },
|
|
{ href: '/dashboard/news', label: 'News', icon: '📰' },
|
|
{ href: '/dashboard/termine', label: 'Termine', icon: '📅' },
|
|
{ href: '/dashboard/stellen', label: 'Lehrlingsbörse', icon: '🎓' },
|
|
{ href: '/dashboard/einstellungen', label: 'Einstellungen', icon: '⚙️' },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside className="w-64 bg-white border-r flex flex-col flex-shrink-0">
|
|
{/* Logo */}
|
|
<div className="p-6 border-b">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-brand-500 rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">I</span>
|
|
</div>
|
|
<span className="font-bold text-gray-900">InnungsApp</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4 space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive =
|
|
item.href === '/dashboard'
|
|
? pathname === '/dashboard'
|
|
: pathname.startsWith(item.href)
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={clsx('sidebar-link', isActive && 'sidebar-link-active')}
|
|
>
|
|
<span>{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 border-t">
|
|
<p className="text-xs text-gray-400">InnungsApp v0.1.0</p>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|