MALIO-DEV/Lesstime
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 32 Wiki Activity

feat(layout) : add collapsible sidebar with icon-only compact mode

Browse Source 
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>
This commit is contained in:
THOLOT DECHENE Matthieu
2026-03-10 21:36:28 +01:00
parent bb332aa7e8
commit 95450e3b5f
3 changed files with 155 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/layouts/default.vue
View File

@@ -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()