feat(kon): collapsible sidebar — toggle with [ key, auto-collapse below 900px, icons-only mode

- Add sidebarCollapsed to settings defaults (persists via localStorage on saveSettings)
- Sidebar collapses to 48px icons-only view with smooth 200ms transition
- Toggle button (chevron) at top of nav; [ keyboard shortcut in layout (input-safe)
- Auto-collapse on window resize below 900px (checked on mount and on resize event)
- Titlebar left spacer tracks sidebar width reactively (48px / 210px)
- All labels, profile selector, status text hidden in collapsed mode; nav items show tooltips via title attribute

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-17 02:26:08 +00:00
parent 4bfc4c1374
commit 3f6d718bb2
4 changed files with 141 additions and 42 deletions

View File

@@ -1,5 +1,6 @@
<script>
import { getCurrentWindow } from "@tauri-apps/api/window";
import { settings } from "$lib/stores/page.svelte.js";
let maximised = $state(false);
@@ -38,7 +39,10 @@
data-tauri-drag-region
>
<!-- Left spacer: aligns with sidebar width -->
<div class="w-[210px] min-w-[210px]" data-tauri-drag-region></div>
<div
class="transition-all duration-200 {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
data-tauri-drag-region
></div>
<!-- Centre: drag area -->
<div class="flex-1" data-tauri-drag-region></div>