refactor: amélioration de la Sidebar.vue avec suppression de MenuItem.vue et mise à jour de MenuGroup.vue pour une gestion simplifiée des éléments de menu

assets/vue/app/shared/components/layout/Sidebar.vue

@@ -9,22 +9,12 @@
         <nav class="h-full overflow-y-auto">
             <ul class="h-full flex flex-col">
                 <li v-for="(item, index) in menuItems" :key="index" class="mb-2">
-                    <template v-if="item.id">
+                    <MenuGroup
-                        <MenuGroup
+                        :id="item.id"
-                            :id="item.id"
-                            :icon="item.icon"
-                            :text="item.text"
-                            :sub-items="item.subItems"
-                            :is-active="isActive(item)"
-                            :to="item.to" />
-                    </template>
-                    <MenuItem
-                        v-else
                         :icon="item.icon"
                         :text="item.text"
-                        :to="item.to"
+                        :sub-items="item.subItems"
-                        :is-active="isActiveRoute(item.to)"
+                        :to="item.to" />
-                        :badge="item.badge" />
                 </li>
             </ul>
         </nav>
@@ -43,8 +33,7 @@
         ClockIcon,
         Cog6ToothIcon,
         ComputerDesktopIcon
-    } from '@heroicons/vue/24/outline';
+    } from '@heroicons/vue/24/solid';
-    import MenuItem from './sidebar/MenuItem.vue';
     import MenuGroup from './sidebar/MenuGroup.vue';
 
     const route = useRoute();
@@ -55,22 +44,6 @@
         }
     });
 
-    const isActiveRoute = path => {
-        return route.path === path;
-    };
-
-    const isActive = item => {
-        if (!item.to) {
-            return item.subItems?.some(subItem => route.path === subItem.to) || false;
-        }
-
-        if (item.to === '/') {
-            return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
-        }
-
-        return route.path.startsWith(item.to);
-    };
-
     const menuItems = [
         {
             icon: BookOpenIcon,
@@ -90,17 +63,20 @@
         {
             icon: ArrowsRightLeftIcon,
             text: 'Convertir CBR en CBZ',
-            to: '/convert'
+            to: '/convert',
+            id: 'convert'
         },
         {
             icon: CalendarIcon,
             text: 'Calendrier',
-            to: '/calendar'
+            to: '/calendar',
+            id: 'calendar'
         },
         {
             icon: ClockIcon,
             text: 'Activité',
             to: '/activity',
+            id: 'activity',
             badge: '3'
         },
         {

assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue

@@ -14,9 +14,12 @@
                 }">
                 <div class="flex items-center flex-grow">
                     <component :is="icon" class="w-5 h-5 mr-3" />
-                    <span>{{ text }}</span>
+                    <span class="px-2">{{ text }}</span>
                 </div>
-                <component :is="expanded ? ChevronUpIcon : ChevronDownIcon" class="w-4 h-4" />
+                <component
+                    v-if="subItems.length > 0"
+                    :is="expanded ? ChevronUpIcon : ChevronDownIcon"
+                    class="w-4 h-4" />
             </RouterLink>
         </div>
 
@@ -32,7 +35,7 @@
 </template>
 
 <script setup>
-    import { ref, watch } from 'vue';
+    import { ref, watch, computed } from 'vue';
     import { useRoute } from 'vue-router';
     import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
     import SubMenuItem from './SubMenuItem.vue';
@@ -58,10 +61,6 @@
         subItems: {
             type: Array,
             default: () => []
-        },
-        isActive: {
-            type: Boolean,
-            required: true
         }
     });
 
@@ -69,6 +68,19 @@
     const expanded = ref(false);
     const route = useRoute();
 
+    
+    const isActive = computed(() => {
+        if (!props.to) {
+            return props.subItems?.some(subItem => route.path === subItem.to) || false;
+        }
+
+        if (props.to === '/') {
+            return route.path === props.to || props.subItems.map(item => item.to).includes(route.path);
+        }
+
+        return route.path.startsWith(props.to);
+    });
+
     const isRouteMatching = path => {
         return props.subItems.some(item => path.startsWith(item.to)) || path === props.to;
     };

assets/vue/app/shared/components/layout/sidebar/MenuItem.vue

@@ -1,47 +0,0 @@
-<template>
-    <RouterLink :to="to" class="block px-4 py-2 hover:bg-gray-700 border-l-4 border-transparent" role="menuitem">
-        <div class="flex items-center justify-between">
-            <div class="flex items-center">
-                <component :is="icon" class="w-5 h-5 mr-3" aria-hidden="true" />
-                <span>{{ text }}</span>
-            </div>
-            <span
-                v-if="badge"
-                class="bg-green-500 text-white text-xs px-2 py-1 rounded-full"
-                aria-label="Nouveaux éléments: {{ badge }}">
-                {{ badge }}
-            </span>
-        </div>
-    </RouterLink>
-</template>
-
-<script setup>
-    defineProps({
-        icon: {
-            type: Function,
-            required: true
-        },
-        text: {
-            type: String,
-            required: true
-        },
-        to: {
-            type: String,
-            required: true
-        },
-        isActive: {
-            type: Boolean,
-            required: true
-        },
-        badge: {
-            type: String,
-            default: null
-        }
-    });
-</script>
-
-<style lang="postcss" scoped>
-    .router-link-active {
-        @apply text-green-600 bg-gray-800 border-green-600;
-    }
-</style>