feat: finalisation de la Sidebar.vue

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>