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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user