fix persistence of sidebar state

nwaughachukwuma · Nov 11, 2024 · 5107dd4 · 5107dd4
1 parent 18c2ff4
commit 5107dd4
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 35 deletions.
diff --git a/app/src/lib/components/RootNav.svelte b/app/src/lib/components/RootNav.svelte
@@ -8,50 +8,50 @@
 	import { Button } from './ui/button';
 	import { getAppContext } from '$lib/stores/appContext.svelte';
 	import { goto } from '$app/navigation';
+	import { mediaBreakPoints$ } from '@/utils/mediaBreakpoints';
 
 	export let sessionId: string;
 
 	const { openSettingsDrawer$ } = getAppContext();
 
-	let openSheet = false;
+	const mdAndUp = mediaBreakPoints$('md');
 
-	$: openSettingsDrawer$.set(openSheet);
 	$: pathname = $page.url.pathname;
-
 	function generateNew() {
-		goto('/', {
-			invalidateAll: true,
-			replaceState: true
-		});
+		goto('/', { invalidateAll: true, replaceState: true });
 	}
 </script>
 
 <nav class="relative flex h-16 w-full items-center">
 	<div class="flex h-full items-center">
-		<div class="block pl-3 md:hidden">
-			<SearchSlideSheet bind:open={openSheet}>
-				<svelte-fragment>
-					{#if openSheet}
-						{#key sessionId}
-							<SearchSidebar on:clickItem={() => (openSheet = false)} />
-						{/key}
-					{/if}
-				</svelte-fragment>
-			</SearchSlideSheet>
-		</div>
+		{#if !$mdAndUp}
+			<div class="block pl-3">
+				<SearchSlideSheet bind:open={$openSettingsDrawer$}>
+					<svelte-fragment>
+						{#if $openSettingsDrawer$}
+							{#key sessionId}
+								<SearchSidebar on:clickItem={() => ($openSettingsDrawer$ = false)} />
+							{/key}
+						{/if}
+					</svelte-fragment>
+				</SearchSlideSheet>
+			</div>
+		{/if}
 
-		<div class="hidden pl-3 md:block">
-			<Button variant="ghost" class="px-2" on:click={() => openSettingsDrawer$.update((v) => !v)}>
-				<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
-					<path
-						fill="currentColor"
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-						d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
-					></path>
-				</svg>
-			</Button>
-		</div>
+		{#if $mdAndUp}
+			<div class="pl-3 block">
+				<Button variant="ghost" class="px-2" on:click={() => openSettingsDrawer$.update((v) => !v)}>
+					<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
+						<path
+							fill="currentColor"
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
+						></path>
+					</svg>
+				</Button>
+			</div>
+		{/if}
 
 		<a class="block shrink-0" href="/">
 			<Logo />

diff --git a/app/src/lib/stores/appContext.svelte.ts b/app/src/lib/stores/appContext.svelte.ts
@@ -4,7 +4,7 @@ import { persisted } from 'svelte-persisted-store';
 const CONTEXT_KEY = {};
 
 export const setAppContext = () => {
-	const openSettingsDrawer$ = persisted('SETTINGS_DRAWER', true);
+	const openSettingsDrawer$ = persisted('SETTINGS_DRAWER', false);
 	return setContext(CONTEXT_KEY, {
 		openSettingsDrawer$
 	});

diff --git a/app/src/lib/utils/mediaBreakpoints.ts b/app/src/lib/utils/mediaBreakpoints.ts
@@ -0,0 +1,35 @@
+export type MediaQueryName = keyof typeof mediaQueryMap;
+import { writable, derived } from 'svelte/store';
+
+export const mediaQueryMap = {
+	sm: '(min-width: 640px)',
+	md: '(min-width: 768px)',
+	lg: '(min-width: 1024px)',
+	xl: '(min-width: 1280px)',
+	'2xl': '(min-width: 1536px)'
+};
+
+const noop = (cb: (e: MediaQueryListEvent) => void) => () => cb;
+
+export default function mediaBreakPoints(bp: MediaQueryName) {
+	if (typeof window === 'undefined') {
+		return { matches: false, subscribe: noop };
+	}
+
+	const matchMedia = window.matchMedia(mediaQueryMap[bp]);
+	return {
+		matches: matchMedia.matches,
+		subscribe: (cb: (e: MediaQueryListEvent) => void) => {
+			matchMedia.addEventListener('change', cb);
+			return () => matchMedia.removeEventListener('change', cb);
+		}
+	};
+}
+
+export const mediaBreakPoints$ = (bp: MediaQueryName) => {
+	const mbp = mediaBreakPoints(bp);
+	const matches$ = writable(mbp.matches);
+	mbp.subscribe((e) => matches$.set(e.matches));
+
+	return derived(matches$, (v) => v);
+};
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script context="module">
 	import '../app.css';
 </script>
 
@@ -10,9 +10,11 @@
 	import SearchSidebar from '@/components/Sidebar.svelte';
 	import { page } from '$app/stores';
 	import Spinner from '@/components/Spinner.svelte';
+	import { setAppContext } from '@/stores/appContext.svelte';
 
 	export let data;
 
+	$: setAppContext();
 	$: sessionId = $page.params.sessionId || data.sessionId;
 	$: setSessionContext(sessionId);
 </script>
@@ -26,9 +28,11 @@
 
 	<div class="relative flex h-full w-full gap-x-2">
 		<span class="hidden md:block">
-			{#key sessionId}
-				<SearchSidebar />
-			{/key}
+			{#if browser}
+				{#key sessionId}
+					<SearchSidebar />
+				{/key}
+			{/if}
 		</span>
 
 		{#if !browser}