From 95450e3b5f2ebe48f18aa7ec2ac9c9adca93474f Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Tue, 10 Mar 2026 21:36:28 +0100
Subject: [PATCH] feat(layout) : add collapsible sidebar with icon-only compact
 mode

Introduces SidebarLink component, UI store with localStorage persistence,
and smooth CSS transitions between expanded (w-64) and compact (w-16) modes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/SidebarLink.vue |  52 +++++++++++++
 frontend/layouts/default.vue        | 114 ++++++++++++++++++++--------
 frontend/stores/ui.ts               |  22 ++++++
 3 files changed, 155 insertions(+), 33 deletions(-)
 create mode 100644 frontend/components/SidebarLink.vue
 create mode 100644 frontend/stores/ui.ts

diff --git a/frontend/components/SidebarLink.vue b/frontend/components/SidebarLink.vue
new file mode 100644
index 0000000..f008b77
--- /dev/null
+++ b/frontend/components/SidebarLink.vue
@@ -0,0 +1,52 @@
+<template>
+    <NuxtLink
+        :to="to"
+        class="group/link relative flex items-center transition-colors hover:text-primary-500"
+        :class="linkClasses"
+        :active-class="exact ? '' : activeClass"
+        :exact-active-class="exact ? activeClass : ''"
+    >
+        <Icon :name="icon" :size="sub ? '20' : '24'" class="flex-shrink-0" />
+        <span
+            v-if="!collapsed"
+            class="self-baseline whitespace-nowrap overflow-hidden transition-opacity duration-300"
+            :class="sub ? 'text-sm' : 'text-md'"
+        >
+            {{ label }}
+        </span>
+        <div
+            v-if="collapsed"
+            class="pointer-events-none absolute left-full z-50 ml-2 rounded-md bg-neutral-800 px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/link:pointer-events-auto group-hover/link:opacity-100 whitespace-nowrap"
+        >
+            {{ label }}
+        </div>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    to: string
+    icon: string
+    label: string
+    collapsed: boolean
+    sub?: boolean
+    exact?: boolean
+}>()
+
+const activeClass = computed(() => {
+    if (props.collapsed) {
+        return '!text-primary-500 bg-primary-500/10'
+    }
+    return '!text-primary-500 bg-tertiary-500'
+})
+
+const linkClasses = computed(() => {
+    if (props.collapsed) {
+        return 'justify-center w-10 h-10 mx-auto my-1 p-2 rounded-lg text-neutral-600 hover:text-primary-500 hover:bg-primary-500/10'
+    }
+    if (props.sub) {
+        return 'gap-3 px-4 py-2 pl-12 text-sm font-semibold text-neutral-700'
+    }
+    return 'gap-3 px-4 py-3 text-md font-semibold text-neutral-700'
+})
+</script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 728584f..79930e1 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,47 +1,88 @@
 <template>
     <div class="h-screen overflow-hidden">
         <div class="flex h-full">
-            <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
-                <div>
-                    <img src="/malio.png" alt="Logo" class="w-auto"/>
+            <aside
+                class="flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-all duration-300"
+                :class="ui.sidebarCollapsed ? 'w-16' : 'w-64'"
+            >
+                <div class="flex items-center justify-center overflow-hidden" :class="ui.sidebarCollapsed ? 'p-2' : ''">
+                    <img
+                        v-if="!ui.sidebarCollapsed"
+                        src="/malio.png"
+                        alt="Logo"
+                        class="w-auto"
+                    />
+                    <img
+                        v-else
+                        src="/malio.png"
+                        alt="Logo"
+                        class="h-8 w-8 object-contain"
+                    />
                 </div>
-                <nav class="flex-1 px-4 pb-6">
-                    <NuxtLink
+                <nav class="flex-1 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
+                    <SidebarLink
                         to="/"
-                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
-                        active-class="bg-tertiary-500 text-primary-500"
-                    >
-                        <Icon name="mdi:question-mark" size="24"/>
-                        <span class="self-baseline text-md">Tableau de bord</span>
-                    </NuxtLink>
-                    <NuxtLink
+                        icon="mdi:question-mark"
+                        label="Tableau de bord"
+                        :collapsed="ui.sidebarCollapsed"
+                        :class="ui.sidebarCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
+                    />
+                    <SidebarLink
                         to="/projects"
-                        class="flex gap-3 px-4 py-3 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500"
-                        active-class="bg-tertiary-500 text-primary-500"
-                    >
-                        <Icon name="mdi:folder-outline" size="24"/>
-                        <span class="self-baseline text-md">Projets</span>
-                    </NuxtLink>
-                    <NuxtLink
+                        icon="mdi:folder-outline"
+                        label="Projets"
+                        :collapsed="ui.sidebarCollapsed"
+                    />
+                    <template v-if="currentProjectId">
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}`"
+                            icon="mdi:view-column-outline"
+                            label="Kanban"
+                            :collapsed="ui.sidebarCollapsed"
+                            sub
+                            exact
+                        />
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}/groups`"
+                            icon="mdi:tag-multiple-outline"
+                            label="Groupes"
+                            :collapsed="ui.sidebarCollapsed"
+                            sub
+                        />
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}/statuses`"
+                            icon="mdi:list-status"
+                            label="Statuts"
+                            :collapsed="ui.sidebarCollapsed"
+                            sub
+                        />
+                    </template>
+                    <SidebarLink
                         to="/clients"
-                        class="flex gap-3 px-4 py-3 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500"
-                        active-class="bg-tertiary-500 text-primary-500"
-                    >
-                        <Icon name="mdi:account-group-outline" size="24"/>
-                        <span class="self-baseline text-md">Clients</span>
-                    </NuxtLink>
-                    <NuxtLink
+                        icon="mdi:account-group-outline"
+                        label="Clients"
+                        :collapsed="ui.sidebarCollapsed"
+                    />
+                    <SidebarLink
                         to="/admin"
-                        class="flex gap-3 px-4 py-3 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500"
-                        active-class="bg-tertiary-500 text-primary-500"
-                    >
-                        <Icon name="mdi:cog-outline" size="24"/>
-                        <span class="self-baseline text-md">Administration</span>
-                    </NuxtLink>
+                        icon="mdi:cog-outline"
+                        label="Administration"
+                        :collapsed="ui.sidebarCollapsed"
+                    />
                 </nav>
 
                 <div class="flex flex-col gap-2 items-center p-4">
-                    <p class="font-bold">v 0.0.0</p>
+                    <p v-if="!ui.sidebarCollapsed" class="font-bold">v {{ version }}</p>
+                    <button
+                        class="flex items-center justify-center rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors"
+                        :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
+                        @click="ui.toggleSidebar()"
+                    >
+                        <Icon
+                            :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
+                            size="20"
+                        />
+                    </button>
                 </div>
             </aside>
 
@@ -59,7 +100,14 @@
 import {useAppVersion} from "~/composables/useAppVersion";
 
 const auth = useAuthStore()
+const ui = useUiStore()
 const {version} = useAppVersion()
+const route = useRoute()
+
+const currentProjectId = computed(() => {
+    const match = route.path.match(/^\/projects\/(\d+)/)
+    return match ? match[1] : null
+})
 
 const handleLogout = async () => {
     await auth.logout()
diff --git a/frontend/stores/ui.ts b/frontend/stores/ui.ts
new file mode 100644
index 0000000..fc51610
--- /dev/null
+++ b/frontend/stores/ui.ts
@@ -0,0 +1,22 @@
+export const useUiStore = defineStore('ui', () => {
+    const sidebarCollapsed = ref(false)
+
+    if (import.meta.client) {
+        const saved = localStorage.getItem('ui-sidebar-collapsed')
+        if (saved !== null) {
+            sidebarCollapsed.value = saved === 'true'
+        }
+    }
+
+    watch(sidebarCollapsed, (val) => {
+        if (import.meta.client) {
+            localStorage.setItem('ui-sidebar-collapsed', String(val))
+        }
+    })
+
+    function toggleSidebar() {
+        sidebarCollapsed.value = !sidebarCollapsed.value
+    }
+
+    return { sidebarCollapsed, toggleSidebar }
+})