From bd1d6ba765ddf5f2cc43f111bccc80309008ad01 Mon Sep 17 00:00:00 2001
From: OpenClaw <openclaw@kronos-soulution.de>
Date: Fri, 13 Mar 2026 10:39:00 +0000
Subject: [PATCH] refactor: Reorganize sidebar menu structure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Core features at top: Dashboard, Aufträge, Mitarbeiter, Verfügbarkeit, Stundenzettel, Objekte
- Premium modules in collapsible 'Module' section
- Settings and Help at bottom
- Clean visual separation with dividers
---
 src/components/layout/AppSidebar.vue | 148 +++++++++++++++++++++------
 1 file changed, 115 insertions(+), 33 deletions(-)

diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index bd1ef78..13ef26d 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
@@ -15,44 +15,61 @@ defineEmits<{
 const route = useRoute()
 const { t } = useI18n()
 const authStore = useAuthStore()
+const modulesExpanded = ref(true)
 
-const navigation = computed(() => {
+// Core navigation - always visible
+const coreNavigation = computed(() => {
   const items = [
     { name: t('nav.dashboard'), href: '/', icon: '📊' },
     { name: t('nav.orders'), href: '/orders', icon: '📋' },
   ]
 
   if (authStore.canManageUsers) {
-    items.push(
-      { name: t('nav.users'), href: '/users', icon: '👥' },
-      { name: t('nav.shifts'), href: '/shifts', icon: '📅' }
-    )
+    items.push({ name: t('nav.users'), href: '/users', icon: '👥' })
   }
 
   items.push(
     { name: t('nav.availability'), href: '/availability', icon: '🗓️' },
     { name: t('nav.timesheets'), href: '/timesheets', icon: '⏱️' },
+    { name: t('nav.objects'), href: '/objects', icon: '🏢' }
+  )
+
+  return items
+})
+
+// Premium modules - shown under "Module" section
+const moduleNavigation = computed(() => {
+  const items = [
     { name: t('nav.qualifications'), href: '/qualifications', icon: '🎓' },
-    { name: t('nav.objects'), href: '/objects', icon: '🏢' },
+    { name: t('nav.shifts'), href: '/shifts', icon: '📅' },
     { name: t('nav.patrols'), href: '/patrols', icon: '📍' },
     { name: t('nav.incidents'), href: '/incidents', icon: '🚨' },
     { name: t('nav.documents'), href: '/documents', icon: '📁' },
-  )
+    { name: t('nav.vehicles'), href: '/vehicles', icon: '🚗' },
+  ]
 
   if (authStore.canManageUsers) {
     items.push(
-      { name: t('nav.vehicles'), href: '/vehicles', icon: '🚗' },
-      { name: t('nav.customers'), href: '/customers', icon: '🤝' }
+      { name: t('nav.customers'), href: '/customers', icon: '🤝' },
+      { name: t('nav.partnerships'), href: '/partnerships', icon: '🔗' }
     )
   }
 
   if (authStore.isChef) {
-    items.push(
-      { name: t('nav.billing'), href: '/billing', icon: '💰' },
-      { name: t('nav.modules'), href: '/modules', icon: '⚙️' }
-    )
+    items.push({ name: t('nav.billing'), href: '/billing', icon: '💰' })
   }
 
+  return items
+})
+
+// Bottom navigation
+const bottomNavigation = computed(() => {
+  const items = []
+  
+  if (authStore.isChef) {
+    items.push({ name: t('nav.modules'), href: '/modules', icon: '⚙️' })
+  }
+  
   items.push(
     { name: t('nav.settings'), href: '/settings', icon: '🔧' },
     { name: t('nav.help'), href: '/help', icon: '📚' }
@@ -65,17 +82,21 @@ function isActive(href: string) {
   if (href === '/') return route.path === '/'
   return route.path.startsWith(href)
 }
+
+function toggleModules() {
+  modulesExpanded.value = !modulesExpanded.value
+}
 </script>
 
 <template>
   <aside
     :class="[
-      'fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform lg:translate-x-0',
+      'fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform lg:translate-x-0 flex flex-col',
       open ? 'translate-x-0' : '-translate-x-full'
     ]"
   >
     <!-- Logo -->
-    <div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700">
+    <div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
       <template v-if="authStore.orgLogo">
         <img 
           :src="authStore.orgLogo" 
@@ -89,26 +110,87 @@ function isActive(href: string) {
     </div>
 
     <!-- Navigation -->
-    <nav class="mt-6 px-3">
-      <router-link
-        v-for="item in navigation"
-        :key="item.href"
-        :to="item.href"
-        :class="[
-          'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
-          isActive(item.href)
-            ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
-            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
-        ]"
-        @click="$emit('close')"
-      >
-        <span class="text-xl">{{ item.icon }}</span>
-        <span class="font-medium">{{ item.name }}</span>
-      </router-link>
+    <nav class="flex-1 overflow-y-auto py-4 px-3">
+      <!-- Core Navigation -->
+      <div class="mb-4">
+        <router-link
+          v-for="item in coreNavigation"
+          :key="item.href"
+          :to="item.href"
+          :class="[
+            'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
+            isActive(item.href)
+              ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
+              : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+          ]"
+          @click="$emit('close')"
+        >
+          <span class="text-xl">{{ item.icon }}</span>
+          <span class="font-medium">{{ item.name }}</span>
+        </router-link>
+      </div>
+
+      <!-- Modules Section -->
+      <div class="mb-4">
+        <button
+          @click="toggleModules"
+          class="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider hover:text-gray-700 dark:hover:text-gray-200"
+        >
+          <span>{{ t('nav.modules') }}</span>
+          <svg 
+            :class="['w-4 h-4 transition-transform', modulesExpanded ? 'rotate-180' : '']" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        
+        <div v-show="modulesExpanded" class="mt-1">
+          <router-link
+            v-for="item in moduleNavigation"
+            :key="item.href"
+            :to="item.href"
+            :class="[
+              'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-sm',
+              isActive(item.href)
+                ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
+                : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+            ]"
+            @click="$emit('close')"
+          >
+            <span class="text-lg">{{ item.icon }}</span>
+            <span class="font-medium">{{ item.name }}</span>
+          </router-link>
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <div class="border-t border-gray-200 dark:border-gray-700 my-4"></div>
+
+      <!-- Bottom Navigation -->
+      <div>
+        <router-link
+          v-for="item in bottomNavigation"
+          :key="item.href"
+          :to="item.href"
+          :class="[
+            'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
+            isActive(item.href)
+              ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
+              : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+          ]"
+          @click="$emit('close')"
+        >
+          <span class="text-xl">{{ item.icon }}</span>
+          <span class="font-medium">{{ item.name }}</span>
+        </router-link>
+      </div>
     </nav>
 
     <!-- User info -->
-    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
+    <div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
       <div class="flex items-center gap-3">
         <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
           <span class="text-primary-600 dark:text-primary-300 font-medium">