feat: finalisation de la Sidebar.vue

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "strict",
+  "singleAttributePerLine": false,
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": true,
+  "vueIndentScriptAndStyle": true,
+  "bracketSameLine": true
+}

assets/vue/app/router/index.js

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '../shared/components/layout/Layout.vue';
 import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
-import MangaDetails from "../domain/manga/presentation/pages/MangaDetails.vue";
+import MangaDetails from '../domain/manga/presentation/pages/MangaDetails.vue';
 
 // Placeholder component for new routes
 const PlaceholderComponent = {
@@ -78,6 +78,12 @@ const routes = [
                 props: { title: 'Activité' }
             },
             // Paramètres
+            {
+                path: '/settings',
+                name: 'settings',
+                component: PlaceholderComponent,
+                props: { title: 'Paramètres' }
+            },
             {
                 path: '/settings/general',
                 name: 'settings-general',
@@ -103,6 +109,12 @@ const routes = [
                 props: { title: "Paramètres de l'interface" }
             },
             // Système
+            {
+                path: '/system',
+                name: 'system',
+                component: PlaceholderComponent,
+                props: { title: 'Système' }
+            },
             {
                 path: '/system/status',
                 name: 'system-status',

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

@@ -1,36 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+    <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)"
-    />
+            @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 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 = () => {
+    const toggleSidebar = () => {
         isSidebarOpen.value = !isSidebarOpen.value;
-};
+    };
 
-const closeSidebar = () => {
+    const closeSidebar = () => {
         isSidebarOpen.value = false;
-};
+    };
 
-defineEmits(['manga-click', 'add-manga-click']);
+    defineEmits(['manga-click', 'add-manga-click']);
 </script>

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

@@ -1,75 +1,39 @@
 <template>
     <aside
         :class="[
-      'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
+            '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'
         ]"
-  >
-    <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 -->
+        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">
-          <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>
+                        <MenuGroup
+                            :id="item.id"
+                            :icon="item.icon"
+                            :text="item.text"
+                            :sub-items="item.subItems"
+                            :is-active="isActive(item)"
+                            :to="item.to" />
                     </template>
-          </div>
-        </template>
-
-        <!-- Simple menu item -->
-        <router-link
+                    <MenuItem
                         v-else
+                        :icon="item.icon"
+                        :text="item.text"
                         :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>
+                        :is-active="isActiveRoute(item.to)"
+                        :badge="item.badge" />
+                </li>
+            </ul>
         </nav>
     </aside>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { 
+    import { useRoute } from 'vue-router';
+    import {
         BookOpenIcon,
         PlusIcon,
         ArrowDownTrayIcon,
@@ -78,39 +42,49 @@ import {
         CalendarIcon,
         ClockIcon,
         Cog6ToothIcon,
-  ComputerDesktopIcon,
-  ChevronDownIcon,
-  ChevronUpIcon
-} from '@heroicons/vue/24/outline';
+        ComputerDesktopIcon
+    } from '@heroicons/vue/24/outline';
+    import MenuItem from './sidebar/MenuItem.vue';
+    import MenuGroup from './sidebar/MenuGroup.vue';
 
-const props = defineProps({
+    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 = [
+        return route.path.startsWith(item.to);
+    };
+
+    const menuItems = [
         {
             icon: BookOpenIcon,
             text: 'Mangas',
+            to: '/',
             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: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
+                {
+                    icon: ArrowDownTrayIcon,
+                    text: 'Import bibliothèque',
+                    to: '/import'
+                },
+                { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
             ]
         },
         {
@@ -132,24 +106,26 @@ const menuItems = [
         {
             icon: Cog6ToothIcon,
             text: 'Paramètres',
+            to: '/settings',
             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: 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: [
-      { text: 'Status', to: '/system/status' },
-      { text: 'Backup', to: '/system/backup' },
-      { text: 'Logs', to: '/system/logs' },
-      { text: 'Updates', to: '/system/updates' }
+                { 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>

assets/vue/app/shared/stores/menuStore.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const useMenuStore = defineStore('menu', {
+    state: () => ({
+        activeMenuId: null
+    }),
+    actions: {
+        setActiveMenu(menuId) {
+            this.activeMenuId = menuId;
+        }
+    }
+});

tests/Domain/Manga/Application/QueryHandler/GetMangaBySlugHandlerTest.php

@@ -27,17 +27,17 @@ class GetMangaBySlugHandlerTest extends TestCase
     {
         // Arrange
         $manga = new Manga(
-            new MangaId('1'),
-            new MangaTitle('One Piece'),
-            new MangaSlug('one-piece'),
-            'Description',
-            'Eiichiro Oda',
-            1997,
-            ['Action', 'Adventure'],
-            'ongoing',
-            null,
-            'https://example.com/image.jpg',
-            4.5
+            id: new MangaId('1'),
+            title: new MangaTitle('One Piece'),
+            slug: new MangaSlug('one-piece'),
+            description: 'Description',
+            author: 'Eiichiro Oda',
+            publicationYear: 1997,
+            genres: ['Action', 'Adventure'],
+            status: 'ongoing',
+            externalId: null,
+            imageUrl: 'https://example.com/image.jpg',
+            rating: 4.5
         );
         $this->repository->save($manga);