feat: finalisation de la Sidebar.vue

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

@@ -1,36 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <Header 
-      @menu-click="toggleSidebar" 
-      @manga-click="$emit('manga-click', $event)"
-      @add-manga-click="$emit('add-manga-click', $event)"
-    />
-    <Sidebar 
-      :is-open="isSidebarOpen" 
-      @close="closeSidebar"
-      @add-manga-click="$emit('add-manga-click', $event)"
-    />
-    
-    <main class="pt-16 md:ml-60">
-      <router-view></router-view>
-    </main>
-  </div>
+    <div class="min-h-screen bg-gray-50 flex">
+        <Header
+            @menu-click="toggleSidebar"
+            @manga-click="$emit('manga-click', $event)"
+            @add-manga-click="$emit('add-manga-click', $event)" />
+        <Sidebar :is-open="isSidebarOpen" @close="closeSidebar" @add-manga-click="$emit('add-manga-click', $event)" />
+
+        <main class="flex-1 pt-16 md:ml-60">
+            <RouterView></RouterView>
+        </main>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import Header from './Header.vue';
-import Sidebar from './Sidebar.vue';
+    import { ref } from 'vue';
+    import Header from './Header.vue';
+    import Sidebar from './Sidebar.vue';
 
-const isSidebarOpen = ref(false);
+    const isSidebarOpen = ref(false);
 
-const toggleSidebar = () => {
-  isSidebarOpen.value = !isSidebarOpen.value;
-};
+    const toggleSidebar = () => {
+        isSidebarOpen.value = !isSidebarOpen.value;
+    };
 
-const closeSidebar = () => {
-  isSidebarOpen.value = false;
-};
+    const closeSidebar = () => {
+        isSidebarOpen.value = false;
+    };
 
-defineEmits(['manga-click', 'add-manga-click']);
-</script> 
+    defineEmits(['manga-click', 'add-manga-click']);
+</script>

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

@@ -1,155 +1,131 @@
 <template>
-  <aside 
-    :class="[
-      'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
-      isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
-    ]"
-  >
-    <nav class="h-full overflow-y-auto py-4">
-      <div v-for="(item, index) in menuItems" :key="index" class="mb-2">
-        <!-- Menu item with submenu -->
-        <template v-if="item.id">
-          <button
-            @click="toggleMenu(item.id)"
-            class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
-          >
-            <div class="flex items-center">
-              <component :is="item.icon" class="w-5 h-5 mr-3" />
-              <span>{{ item.text }}</span>
-            </div>
-            <component 
-              :is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon" 
-              class="w-4 h-4"
-            />
-          </button>
-          
-          <div v-show="expandedMenus[item.id]">
-            <template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
-              <router-link
-                v-if="subItem.to"
-                :to="subItem.to"
-                class="block px-4 py-2 pl-12 hover:bg-gray-100"
-              >
-                {{ subItem.text }}
-              </router-link>
-              <button
-                v-else
-                @click="subItem.onClick"
-                class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
-              >
-                {{ subItem.text }}
-              </button>
-            </template>
-          </div>
-        </template>
-
-        <!-- Simple menu item -->
-        <router-link
-          v-else
-          :to="item.to"
-          class="block px-4 py-2 hover:bg-gray-100"
-        >
-          <div class="flex items-center justify-between">
-            <div class="flex items-center">
-              <component :is="item.icon" class="w-5 h-5 mr-3" />
-              <span>{{ item.text }}</span>
-            </div>
-            <span
-              v-if="item.badge"
-              class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
-            >
-              {{ item.badge }}
-            </span>
-          </div>
-        </router-link>
-      </div>
-    </nav>
-  </aside>
+    <aside
+        :class="[
+            'fixed top-16 left-0 w-60 bg-gray-600 text-white transform transition-transform duration-300 ease-in-out z-40 h-full',
+            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+        ]"
+        role="navigation"
+        aria-label="Menu principal">
+        <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
+                            :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"
+                        :is-active="isActiveRoute(item.to)"
+                        :badge="item.badge" />
+                </li>
+            </ul>
+        </nav>
+    </aside>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { 
-  BookOpenIcon,
-  PlusIcon, 
-  ArrowDownTrayIcon, 
-  GlobeAltIcon, 
-  ArrowsRightLeftIcon,
-  CalendarIcon,
-  ClockIcon,
-  Cog6ToothIcon,
-  ComputerDesktopIcon,
-  ChevronDownIcon,
-  ChevronUpIcon
-} from '@heroicons/vue/24/outline';
+    import { useRoute } from 'vue-router';
+    import {
+        BookOpenIcon,
+        PlusIcon,
+        ArrowDownTrayIcon,
+        GlobeAltIcon,
+        ArrowsRightLeftIcon,
+        CalendarIcon,
+        ClockIcon,
+        Cog6ToothIcon,
+        ComputerDesktopIcon
+    } from '@heroicons/vue/24/outline';
+    import MenuItem from './sidebar/MenuItem.vue';
+    import MenuGroup from './sidebar/MenuGroup.vue';
 
-const props = defineProps({
-  isOpen: {
-    type: Boolean,
-    required: true
-  }
-});
+    const route = useRoute();
+    const props = defineProps({
+        isOpen: {
+            type: Boolean,
+            required: true
+        }
+    });
 
-const emit = defineEmits(['close', 'add-manga-click']);
+    const isActiveRoute = path => {
+        return route.path === path;
+    };
 
-const expandedMenus = ref({
-  mangas: true,
-  settings: false,
-  system: false
-});
+    const isActive = item => {
+        if (!item.to) {
+            return item.subItems?.some(subItem => route.path === subItem.to) || false;
+        }
 
-const toggleMenu = (menuId) => {
-  expandedMenus.value[menuId] = !expandedMenus.value[menuId];
-};
+        if (item.to === '/') {
+            return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
+        }
 
-const menuItems = [
-  {
-    icon: BookOpenIcon,
-    text: 'Mangas',
-    id: 'mangas',
-    subItems: [
-      { icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
-      { icon: ArrowDownTrayIcon, text: 'Import bibliothèque', to: '/import' },
-      { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' },
-    ]
-  },
-  {
-    icon: ArrowsRightLeftIcon,
-    text: 'Convertir CBR en CBZ',
-    to: '/convert'
-  },
-  {
-    icon: CalendarIcon,
-    text: 'Calendrier',
-    to: '/calendar'
-  },
-  {
-    icon: ClockIcon,
-    text: 'Activité',
-    to: '/activity',
-    badge: '3'
-  },
-  {
-    icon: Cog6ToothIcon,
-    text: 'Paramètres',
-    id: 'settings',
-    subItems: [
-      { text: 'Général', to: '/settings/general' },
-      { text: 'Dossiers', to: '/settings/folders' },
-      { text: 'Scrappers', to: '/settings/scrappers' },
-      { text: 'UI', to: '/settings/ui' }
-    ]
-  },
-  {
-    icon: ComputerDesktopIcon,
-    text: 'Système',
-    id: 'system',
-    subItems: [
-      { text: 'Status', to: '/system/status' },
-      { text: 'Backup', to: '/system/backup' },
-      { text: 'Logs', to: '/system/logs' },
-      { text: 'Updates', to: '/system/updates' }
-    ]
-  },
-];
-</script> 
+        return route.path.startsWith(item.to);
+    };
+
+    const menuItems = [
+        {
+            icon: BookOpenIcon,
+            text: 'Mangas',
+            to: '/',
+            id: 'mangas',
+            subItems: [
+                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
+                {
+                    icon: ArrowDownTrayIcon,
+                    text: 'Import bibliothèque',
+                    to: '/import'
+                },
+                { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
+            ]
+        },
+        {
+            icon: ArrowsRightLeftIcon,
+            text: 'Convertir CBR en CBZ',
+            to: '/convert'
+        },
+        {
+            icon: CalendarIcon,
+            text: 'Calendrier',
+            to: '/calendar'
+        },
+        {
+            icon: ClockIcon,
+            text: 'Activité',
+            to: '/activity',
+            badge: '3'
+        },
+        {
+            icon: Cog6ToothIcon,
+            text: 'Paramètres',
+            to: '/settings',
+            id: 'settings',
+            subItems: [
+                { icon: null, text: 'Général', to: '/settings/general' },
+                { icon: null, text: 'Dossiers', to: '/settings/folders' },
+                { icon: null, text: 'Scrappers', to: '/settings/scrappers' },
+                { icon: null, text: 'UI', to: '/settings/ui' }
+            ]
+        },
+        {
+            icon: ComputerDesktopIcon,
+            text: 'Système',
+            to: '/system',
+            id: 'system',
+            subItems: [
+                { icon: null, text: 'Status', to: '/system/status' },
+                { icon: null, text: 'Backup', to: '/system/backup' },
+                { icon: null, text: 'Logs', to: '/system/logs' },
+                { icon: null, text: 'Updates', to: '/system/updates' }
+            ]
+        }
+    ];
+</script>

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

@@ -0,0 +1,97 @@
+<template>
+    <div
+        class="border-l-4"
+        :class="{
+            'border-green-600': isActive,
+            'hover:bg-gray-700 border-transparent': !isActive
+        }">
+        <div class="flex w-full" @click="toggleExpanded">
+            <RouterLink
+                :to="to"
+                class="flex-grow px-4 py-2 flex items-center"
+                :class="{
+                    'text-green-600 bg-gray-800': isActive
+                }">
+                <div class="flex items-center flex-grow">
+                    <component :is="icon" class="w-5 h-5 mr-3" />
+                    <span>{{ text }}</span>
+                </div>
+                <component :is="expanded ? ChevronUpIcon : ChevronDownIcon" class="w-4 h-4" />
+            </RouterLink>
+        </div>
+
+        <ul v-if="subItems.length > 0" class="ml-8 mt-2 space-y-4" v-show="expanded">
+            <SubMenuItem
+                v-for="(subItem, index) in subItems"
+                :key="index"
+                :text="subItem.text"
+                :to="subItem.to"
+                @click="subItem.onClick" />
+        </ul>
+    </div>
+</template>
+
+<script setup>
+    import { ref, watch } from 'vue';
+    import { useRoute } from 'vue-router';
+    import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
+    import SubMenuItem from './SubMenuItem.vue';
+    import { useMenuStore } from '../../../stores/menuStore';
+
+    const props = defineProps({
+        id: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: Function,
+            required: true
+        },
+        text: {
+            type: String,
+            required: true
+        },
+        to: {
+            type: String,
+            required: true
+        },
+        subItems: {
+            type: Array,
+            default: () => []
+        },
+        isActive: {
+            type: Boolean,
+            required: true
+        }
+    });
+
+    const menuStore = useMenuStore();
+    const expanded = ref(false);
+    const route = useRoute();
+
+    const isRouteMatching = path => {
+        return props.subItems.some(item => path.startsWith(item.to)) || path === props.to;
+    };
+
+    watch(
+        [() => route.path, () => menuStore.activeMenuId],
+        ([newPath, newMenuId]) => {
+            if (isRouteMatching(newPath)) {
+                expanded.value = true;
+                menuStore.setActiveMenu(props.id);
+            } else if (newMenuId !== props.id) {
+                expanded.value = false;
+            }
+        },
+        { immediate: true }
+    );
+
+    const toggleExpanded = () => {
+        if (expanded.value) {
+            menuStore.setActiveMenu(null);
+        } else {
+            menuStore.setActiveMenu(props.id);
+        }
+        expanded.value = !expanded.value;
+    };
+</script>

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

@@ -0,0 +1,47 @@
+<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>

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

@@ -0,0 +1,31 @@
+<template>
+    <li>
+        <RouterLink v-if="to" :to="to" class="block hover:text-green-600" role="menuitem">
+            {{ text }}
+        </RouterLink>
+        <button v-else @click="$emit('click')" class="w-full text-left hover:text-green-600" role="menuitem">
+            {{ text }}
+        </button>
+    </li>
+</template>
+
+<script setup>
+    defineProps({
+        text: {
+            type: String,
+            required: true
+        },
+        to: {
+            type: String,
+            default: null
+        }
+    });
+
+    defineEmits(['click']);
+</script>
+
+<style lang="postcss" scoped>
+    .router-link-exact-active {
+        @apply text-green-600;
+    }
+</style>