From 3b14b300d555ad4235fce026174be6c4b1cd8c16 Mon Sep 17 00:00:00 2001 From: Sam Chau Date: Tue, 30 Dec 2025 05:07:01 +1030 Subject: [PATCH] feat(sidebar): implement collapsible sidebar functionality with localStorage support --- src/lib/client/stores/sidebar.ts | 36 +++++++++++++++++++ .../client/ui/navigation/navbar/navbar.svelte | 5 ++- .../ui/navigation/pageNav/pageNav.svelte | 5 ++- src/routes/+layout.svelte | 22 ++++++++++-- 4 files changed, 63 insertions(+), 5 deletions(-) create mode 100644 src/lib/client/stores/sidebar.ts diff --git a/src/lib/client/stores/sidebar.ts b/src/lib/client/stores/sidebar.ts new file mode 100644 index 0000000..2e1923f --- /dev/null +++ b/src/lib/client/stores/sidebar.ts @@ -0,0 +1,36 @@ +import { writable } from 'svelte/store'; +import { browser } from '$app/environment'; + +const STORAGE_KEY = 'sidebar-collapsed'; + +function createSidebarStore() { + // Get initial value from localStorage + const initial = browser ? localStorage.getItem(STORAGE_KEY) === 'true' : false; + const { subscribe, set, update } = writable(initial); + + return { + subscribe, + toggle: () => + update((collapsed) => { + const newValue = !collapsed; + if (browser) { + localStorage.setItem(STORAGE_KEY, String(newValue)); + } + return newValue; + }), + collapse: () => { + set(true); + if (browser) { + localStorage.setItem(STORAGE_KEY, 'true'); + } + }, + expand: () => { + set(false); + if (browser) { + localStorage.setItem(STORAGE_KEY, 'false'); + } + } + }; +} + +export const sidebarCollapsed = createSidebarStore(); diff --git a/src/lib/client/ui/navigation/navbar/navbar.svelte b/src/lib/client/ui/navigation/navbar/navbar.svelte index 5c455ea..bf2e08d 100644 --- a/src/lib/client/ui/navigation/navbar/navbar.svelte +++ b/src/lib/client/ui/navigation/navbar/navbar.svelte @@ -2,10 +2,13 @@ import AccentPicker from './accentPicker.svelte'; import ThemeToggle from './themeToggle.svelte'; import logo from '$assets/logo-firefox-circular-arrow.png'; + + export let collapsed: boolean = false;