feat: debut d'un front vue.js + ajout de cursorrules

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

@@ -0,0 +1,155 @@
+<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>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { 
+  BookOpenIcon,
+  PlusIcon, 
+  ArrowDownTrayIcon, 
+  GlobeAltIcon, 
+  ArrowsRightLeftIcon,
+  CalendarIcon,
+  ClockIcon,
+  Cog6ToothIcon,
+  ComputerDesktopIcon,
+  ChevronDownIcon,
+  ChevronUpIcon
+} from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['close', 'add-manga-click']);
+
+const expandedMenus = ref({
+  mangas: true,
+  settings: false,
+  system: false
+});
+
+const toggleMenu = (menuId) => {
+  expandedMenus.value[menuId] = !expandedMenus.value[menuId];
+};
+
+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>