hide hamburger on mobile by default

package.json

@@ -71,6 +71,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"radix-svelte": "^0.9.0"
+		"radix-svelte": "^0.9.0",
+		"ua-parser-js": "^1.0.38"
 	}
 }

src/app.d.ts

@@ -61,6 +61,7 @@ declare global {
 			safeGetSession: () => Promise<{ session: Session | null; user: User | null }>;
 			session: Session | null;
 			user: User | null;
+			isMobile: boolean;
 		}
 		// interface Platform {}
 

src/components/Header.svelte

@@ -5,9 +5,13 @@
 	import Moon from 'lucide-svelte/icons/moon';
 	import { toggleMode } from 'mode-watcher';
 
-	let { supabase, authChange = $bindable() }: { supabase: any; authChange: Boolean } = $props();
+	let {
+		supabase,
+		authChange = $bindable(),
+		isMobile
+	}: { supabase: any; authChange: Boolean; isMobile: boolean } = $props();
 
-	let open: boolean = $state(true);
+	let open: boolean = $state(isMobile);
 
 	let currentUser: { data: { user: { aud: string } } } | undefined = $state();
 

src/hooks.server.ts

@@ -1,10 +1,14 @@
 import { createServerClient } from '@supabase/ssr';
 import { type Handle, redirect } from '@sveltejs/kit';
 import { sequence } from '@sveltejs/kit/hooks';
+import { UAParser } from 'ua-parser-js';
 
 import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
 
 export const supabase: Handle = async ({ event, resolve }) => {
+	const parser = new UAParser(event.request.headers.get('user-agent'));
+	event.locals.isMobile = parser.getDevice().type === 'mobile' || 'dog';
+
 	event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
 		cookies: {
 			getAll() {

src/routes/+layout.server.ts

@@ -1,10 +1,11 @@
 import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = async ({ locals: { safeGetSession } }) => {
+export const load: LayoutServerLoad = async ({ locals: { safeGetSession, isMobile } }) => {
 	const { session, user } = await safeGetSession();
 
 	return {
 		session,
-		user
+		user,
+		isMobile
 	};
 };

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 	inject({ mode: dev ? 'development' : 'production' });
 
 	let { data, children, authChange } = $props();
-	let { session, supabase } = data;
+	let { session, supabase, isMobile } = data;
 
 	onMount(() => {
 		const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
@@ -50,7 +50,7 @@
 <div class="dark:bg-gray-900 dark:text-gray-100 text-gray-900 bg-white">
 	<ModeWatcher defaultMode={'light'} />
 
-	<Header {supabase} bind:authChange />
+	<Header {supabase} {isMobile} bind:authChange />
 
 	<div class="min-h-screen">
 		<div class="wrap">

src/routes/+layout.ts

@@ -31,5 +31,5 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {
 		data: { session }
 	} = await supabase.auth.getSession();
 
-	return { supabase, session };
+	return { supabase, session, isMobile: data.isMobile };
 };