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:
22
frontend/stores/ui.ts
Normal file
22
frontend/stores/ui.ts
Normal 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 }
|
||||
})
|
||||
Reference in New Issue
Block a user