feat(app): device width store

unionlabs · Jul 3, 2024 · a2e1ebb · a2e1ebb
1 parent 7610e77
commit a2e1ebb
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/app/src/lib/utilities/device.ts b/app/src/lib/utilities/device.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const deviceWidth = writable<number>()
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -15,6 +15,7 @@ import LoadingBar from "$lib/components/loading-bar.svelte"
 import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
 import { disablePinchToZoom } from "$lib/utilities/disable-pinch-to-zoom.ts"
+import { deviceWidth } from "$lib/utilities/device.ts";
 
 const { queryClient, localStoragePersister } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
@@ -40,6 +41,7 @@ if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 </svelte:head>
 
 <svelte:window
+  bind:innerWidth={$deviceWidth}
   use:shortcut={{
     trigger: [
       // easily hide tanstack devtools with ctrl + h
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { writable } from "svelte/store";

		export const deviceWidth = writable<number>()