Updated navbar to work on mobile

And yes there are still some things that won't render correctly on mobile!

src/lib/components/Header.svelte

@@ -27,54 +27,64 @@
 		currentTheme = theme;
 	};
 
+	function toggleNavbar(targetId) {
+		const target = document.getElementById(targetId);
+		try {
+			target.classList.toggle('hidden');
+		} catch {
+			if (target.className.contains('hidden')) 
+				target.className = target.className.replace('hidden', '');
+			else
+				target.className += ' hidden';
+		}
+	}
+
 	$: url = $page.url.href;
 	$: routeId = $page.url.pathname;
 	
 	$: data = $page.data;
 	$: authUser = data.authUser;
 </script>
-
 <nav class="bg-gray-200 dark:bg-opacity-10 dark:bg-gray-200">
-	<div class="container">
-		<a class="title" href="/">
-			<h1>{$_('app.title')}</h1>
+	<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+		<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+			<img src="/favicon.png" class="h-8" alt="PraiseLink Logo" />
+			<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">{$_('app.title')}</span>
 		</a>
-		<ul class="links">
-			{#each config.navs as link}
-				{#if (!link.ifLoggedOut && !link.hasRole) || (link.ifLoggedOut && !authUser) || (link.hasRole && authUser && (link.hasRole.length == 0 || link.hasRole.includes(authUser.roleId)))}
-					<li>
-						<a href={link.href} title={$_('navbar.' + link.title)}
-						class="hover:text-black dark:hover:text-white"
-						class:active={link.href === "/" ? routeId === "/" : url.includes(link.href)}
-						data-sveltekit-reload={link.href == '/logout'}>{$_('navbar.' + link.title)}</a>
-					</li>
-				{/if}
-			{/each}
-			<li class="relative">
-				{#if currentTheme == "light"}
-					<a href={"#"} title="Set Darkmode" class="moon" on:click={() => setTheme("dark")}>
-						<Moon />
-					</a>
-				{:else}
-					<a href={"#"} title="Set Lightmode" class="sun" on:click={() => setTheme("light")}>
-						<Sun />
-					</a>
-				{/if}
-			</li>
-		</ul>
+		<button type="button" on:click={() => toggleNavbar('navbar-default')} aria-hidden="true" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+			<span class="sr-only">Open main menu</span>
+			<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+				<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+			</svg>
+		</button>
+		<div class="hidden w-full md:block md:w-auto" id="navbar-default">
+			<ul class="links flex flex-col p-4 md:p-0 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse">
+				{#each config.navs as link}
+					{#if (!link.ifLoggedOut && !link.hasRole) || (link.ifLoggedOut && !authUser) || (link.hasRole && authUser && (link.hasRole.length == 0 || link.hasRole.includes(authUser.roleId)))}
+						<li class="py-2 px-3">
+							<a href={link.href} title={$_('navbar.' + link.title)}
+							class="hover:text-black dark:hover:text-white"
+							class:active={link.href === "/" ? routeId === "/" : url.includes(link.href)}
+							data-sveltekit-reload={link.href == '/logout'}>{$_('navbar.' + link.title)}</a>
+						</li>
+					{/if}
+				{/each}
+				<li class="relative py-2 px-3">
+					{#if currentTheme == "light"}
+						<a href={"#"} title="Set Darkmode" class="moon" on:click={() => setTheme("dark")}>
+							<Moon />
+						</a>
+					{:else}
+						<a href={"#"} title="Set Lightmode" class="sun" on:click={() => setTheme("light")}>
+							<Sun />
+						</a>
+					{/if}
+				</li>
+			</ul>
+		</div>
 	</div>
 </nav>
-
 <style>
-	nav {
-		padding: 0.5em;
-	}
-
-	.container {
-		display: flex;
-		align-items: center;
-	}
-
 	ul {
 		display: flex;
 		margin: 0;
@@ -83,14 +93,6 @@
 		font-size: 1em;
 		place-items: center;
 	}
-	li {
-		margin-right: 20px;
-	}
-	h1 {
-		margin: 0;
-		font-size: 1.3em;
-		font-weight: normal;
-	}
 	a {
 		text-decoration: none;
 		color: #aaa;
@@ -99,17 +101,4 @@
 		color: var(--fg-1);
 		border-bottom: 2px solid;
 	}
-
-	@media (min-width: 768px) {
-		nav {
-			display: flex;
-			justify-content: space-between;
-		}
-
-		.links {
-			display: flex;
-			gap: var(--size-7);
-			margin-block: 0;
-		}
-	}
 </style>
\ No newline at end of file