feat: finalisation de la Sidebar.vue

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>