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>
This commit is contained in:
2026-03-10 21:36:28 +01:00
parent bb332aa7e8
commit 95450e3b5f
3 changed files with 155 additions and 33 deletions

22
frontend/stores/ui.ts Normal file
View File

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