matthieu
95450e3b5f
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>
117 lines
4.6 KiB
Vue
117 lines
4.6 KiB
Vue
<template>
|
|
<div class="h-screen overflow-hidden">
|
|
<div class="flex h-full">
|
|
<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 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
|
|
<SidebarLink
|
|
to="/"
|
|
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"
|
|
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"
|
|
icon="mdi:account-group-outline"
|
|
label="Clients"
|
|
:collapsed="ui.sidebarCollapsed"
|
|
/>
|
|
<SidebarLink
|
|
to="/admin"
|
|
icon="mdi:cog-outline"
|
|
label="Administration"
|
|
:collapsed="ui.sidebarCollapsed"
|
|
/>
|
|
</nav>
|
|
|
|
<div class="flex flex-col gap-2 items-center p-4">
|
|
<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>
|
|
|
|
<div class="h-full flex-1 overflow-hidden flex flex-col">
|
|
<AppTopNav :user="auth.user" />
|
|
<main class="flex-1 overflow-y-auto px-8 py-12">
|
|
<slot/>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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()
|
|
await navigateTo('/login')
|
|
}
|
|
</script>
|