feat: Add Leads submenu with Kontakte and Firmen as children

src/layouts/AppLayout.vue

@@ -8,12 +8,19 @@ const route = useRoute()
 const auth = useAuthStore()
 const sidebarOpen = ref(false)
 const isMobile = ref(false)
+const leadsOpen = ref(true) // Leads submenu open by default
 
 const baseNavItems = [
   { name: 'Inbox', path: '/inbox', icon: 'inbox' },
   { name: 'Dashboard', path: '/', icon: 'chart-pie' },
+  { 
+    name: 'Leads', 
+    icon: 'leads',
+    children: [
       { name: 'Kontakte', path: '/contacts', icon: 'users' },
       { name: 'Firmen', path: '/companies', icon: 'building-office' },
+    ]
+  },
   { name: 'Pipeline', path: '/pipeline', icon: 'funnel' },
   { name: 'Aktivitäten', path: '/activities', icon: 'clipboard-list' },
 ]
@@ -39,6 +46,10 @@ function checkMobile() {
 onMounted(() => {
   checkMobile()
   window.addEventListener('resize', checkMobile)
+  // Auto-expand leads if on contacts or companies page
+  if (route.path.startsWith('/contacts') || route.path.startsWith('/companies')) {
+    leadsOpen.value = true
+  }
 })
 
 onUnmounted(() => {
@@ -49,6 +60,10 @@ function toggleSidebar() {
   sidebarOpen.value = !sidebarOpen.value
 }
 
+function toggleLeads() {
+  leadsOpen.value = !leadsOpen.value
+}
+
 function closeSidebarOnMobile() {
   if (isMobile.value) {
     sidebarOpen.value = false
@@ -64,6 +79,10 @@ function isActive(path) {
   if (path === '/') return route.path === '/'
   return route.path.startsWith(path)
 }
+
+function isLeadsActive() {
+  return route.path.startsWith('/contacts') || route.path.startsWith('/companies')
+}
 </script>
 
 <template>
@@ -131,9 +150,10 @@ function isActive(path) {
 
       <!-- Navigation -->
       <nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
+        <template v-for="item in navItems" :key="item.path || item.name">
+          <!-- Regular nav item -->
           <RouterLink 
-          v-for="item in navItems" 
+            v-if="!item.children"
-          :key="item.path"
             :to="item.path"
             :class="['sidebar-link', isActive(item.path) && 'active']"
             @click="closeSidebarOnMobile"
@@ -146,12 +166,6 @@ function isActive(path) {
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
             </svg>
-          <svg v-if="item.icon === 'users'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-          </svg>
-          <svg v-if="item.icon === 'building-office'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-          </svg>
             <svg v-if="item.icon === 'funnel'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
             </svg>
@@ -163,6 +177,51 @@ function isActive(path) {
             </svg>
             <span>{{ item.name }}</span>
           </RouterLink>
+
+          <!-- Leads submenu -->
+          <div v-else class="space-y-1">
+            <button 
+              @click="toggleLeads"
+              :class="['sidebar-link w-full justify-between', isLeadsActive() && 'active']"
+            >
+              <div class="flex items-center gap-3">
+                <svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+                <span>{{ item.name }}</span>
+              </div>
+              <svg 
+                class="w-4 h-4 transition-transform duration-200" 
+                :class="{ 'rotate-180': leadsOpen }"
+                fill="none" viewBox="0 0 24 24" stroke="currentColor"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+
+            <!-- Submenu items -->
+            <div 
+              v-show="leadsOpen"
+              class="pl-4 space-y-1"
+            >
+              <RouterLink 
+                v-for="child in item.children" 
+                :key="child.path"
+                :to="child.path"
+                :class="['sidebar-link', isActive(child.path) && 'active']"
+                @click="closeSidebarOnMobile"
+              >
+                <svg v-if="child.icon === 'users'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+                <svg v-if="child.icon === 'building-office'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                </svg>
+                <span>{{ child.name }}</span>
+              </RouterLink>
+            </div>
+          </div>
+        </template>
       </nav>
 
       <!-- User -->