feat: Set up initial monorepo structure for admin and mobile applications with core configurations and database integration.

innungsapp/apps/admin/components/layout/Sidebar.tsx

@@ -3,14 +3,15 @@
 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: '🏠' },
-  { 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: '⚙️' },
+  { 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() {
@@ -19,22 +20,25 @@ export function Sidebar() {
   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 className="px-6 py-5 border-b">
+        <Link href="/dashboard">
+          <span
+            className="text-xl font-bold text-gray-900 tracking-tight"
+            style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
+          >
+            Innungs<span className="text-brand-500">App</span>
+          </span>
+        </Link>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 p-4 space-y-1">
+      <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
@@ -42,17 +46,12 @@ export function Sidebar() {
               href={item.href}
               className={clsx('sidebar-link', isActive && 'sidebar-link-active')}
             >
-              <span>{item.icon}</span>
+              <Icon size={16} className="flex-shrink-0" />
               <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>
   )
 }