feat : ajout du composant sidebar

app/components/malio/sidebar/Sidebar.vue

@@ -0,0 +1,139 @@
+<template>
+  <aside
+    :id="componentId"
+    :class="twMerge(
+      'relative flex h-full flex-col bg-m-bg',
+      collapsed ? 'w-[72px]' : 'w-[280px]',
+      sidebarClass,
+    )"
+    v-bind="$attrs"
+  >
+    <div :class="['px-[20px] py-[14px]', collapsed ? '' : 'mx-[10px] border-b-2 border-m-primary']">
+      <slot
+        v-if="collapsed"
+        name="logo-collapsed"
+      />
+      <slot
+        v-else
+        name="logo"
+      />
+    </div>
+
+    <nav class="flex-1 overflow-y-auto mb-4">
+      <div
+        v-for="(section, sectionIndex) in sections"
+        :key="sectionIndex"
+        :class="collapsed ? 'first:border-t-2 first:border-m-primary' : 'mx-[10px] border-t-2 border-m-primary first:border-t-0'"
+      >
+        <div
+          v-if="section.label"
+          :class="[
+            'flex items-center gap-2 px-[10px] pt-2 pb-3',
+            collapsed ? 'justify-center pt-[40px]' : '',
+          ]"
+        >
+          <IconifyIcon
+            v-if="section.icon"
+            :icon="section.icon"
+            :width="24"
+            class="shrink-0 text-m-primary"
+          />
+          <span
+            v-if="!collapsed"
+            class="text-[15px] font-bold uppercase text-m-primary"
+          >
+            {{ section.label }}
+          </span>
+        </div>
+        <ul>
+          <li
+            v-for="item in section.items"
+            :key="item.to"
+            :class="collapsed ? '' : 'pb-2 last:pb-1'"
+          >
+            <NuxtLink
+              :to="item.to"
+              :class="twMerge(
+                'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-tertiary leading-[150%]',
+                collapsed ? 'px-3 text-center' : 'pl-[42px] pr-3',
+              )"
+            >
+              <span v-if="!collapsed">{{ item.label }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <button
+      type="button"
+      :aria-label="collapsed ? 'Déplier le menu' : 'Plier le menu'"
+      :class="twMerge(
+        'absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-10',
+        'flex h-8 w-8 items-center justify-center rounded-full border border-m-border bg-white shadow-sm',
+        'cursor-pointer transition-colors hover:bg-m-tertiary',
+        toggleClass,
+      )"
+      @click="toggleCollapse"
+    >
+      <IconifyIcon
+        :icon="collapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
+        :width="18"
+      />
+    </button>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioSidebar', inheritAttrs: false})
+
+export type SidebarItem = {
+  label: string
+  to: string
+}
+
+export type SidebarSection = {
+  label?: string
+  icon?: string
+  items: SidebarItem[]
+}
+
+const props = withDefaults(defineProps<{
+  sections: SidebarSection[]
+  modelValue?: boolean
+  id?: string
+  sidebarClass?: string
+  toggleClass?: string
+}>(), {
+  modelValue: undefined,
+  id: '',
+  sidebarClass: '',
+  toggleClass: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-sidebar-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(false)
+
+const collapsed = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+function toggleCollapse() {
+  const newValue = !collapsed.value
+  if (!isControlled.value) {
+    localValue.value = newValue
+  }
+  emit('update:modelValue', newValue)
+}
+</script>