feat(#29): Restyle navbar

src/lib/components/NavLinks.svelte

@@ -8,7 +8,7 @@
 		<div tabindex="0" role="button" class="">Parent</div>
 	{:else}
 		<details>
-			<summary>Parent</summary>
+			<summary class="flex items-center"><span class="mr-1">&#x25BC;</span>Parent </summary>
 		</details>
 	{/if}
 	<ul

src/routes/+layout.svelte

@@ -47,6 +47,12 @@
 
 		return () => data.subscription.unsubscribe();
 	});
+
+	let isMobileMenuOpen = false;
+
+	function toggleMobileMenu() {
+		isMobileMenuOpen = !isMobileMenuOpen;
+	}
 </script>
 
 <svelte:head>
@@ -63,38 +69,38 @@
 </svelte:head>
 
 <header>
-	<nav class="navbar bg-primary text-primary-content">
-		<div class="navbar-start">
-			<div class="dropdown">
-				<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+	<nav class="bg-primary text-primary-content p-4">
+		<div class="container mx-auto flex justify-between items-center">
+			<a href="/" class="text-white font-bold text-xl">SvelteKit SaaS Boilerplate</a>
+
+			<!-- Hamburger Menu Button (Mobile) -->
+			<button on:click={toggleMobileMenu} class="block md:hidden text-white focus:outline-none">
 				<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
+					class="w-6 h-6"
 					fill="none"
-						viewBox="0 0 24 24"
 					stroke="currentColor"
-						><path
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
 						stroke-width="2"
 						d="M4 6h16M4 12h8m-8 6h16"
-						/></svg
-					>
-				</div>
-				<ul
-					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52"
-				>
-					<NavLinks isMobile={true} />
-				</ul>
-			</div>
-			<a href="/" class="btn btn-ghost text-xl">SvelteKit SaaS Boilerplate</a>
-		</div>
-		<div class="navbar-center hidden lg:flex">
-			<ul class="menu menu-horizontal px-1">
+					></path>
+				</svg>
+			</button>
+
+			<!-- Navbar Links (hidden on mobile, visible on larger screens) -->
+			<div class="hidden md:flex space-x-4">
+				<ul class="flex flex-col md:flex-row md:space-x-4">
 					<NavLinks isMobile={false} />
 				</ul>
 			</div>
-		<div class="navbar-end">
+
+			<!-- Right Side: Basket & User Account -->
+			<div class="flex items-center space-x-4">
+				<!-- Basket/Checkout Icon -->
 				<a href="/checkout" class="btn btn-ghost btn-circle">
 					<div class="indicator">
 						<svg
@@ -103,16 +109,19 @@
 							fill="none"
 							viewBox="0 0 24 24"
 							stroke="currentColor"
-						><path
+						>
+							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
 								stroke-width="2"
 								d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-						/></svg
-					>
+							/>
+						</svg>
 						<span class="badge badge-sm indicator-item">{localBasket.items.length}</span>
 					</div>
 				</a>
+
+				<!-- User Account Dropdown -->
 				<details class="dropdown dropdown-end">
 					<summary tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 						<div class="w-10 rounded-full">
@@ -137,9 +146,7 @@
 							tabindex="-1"
 							class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
 						>
-						<li>
-							<a href="/account"> Account </a>
-						</li>
+							<li><a href="/account">Account</a></li>
 							<li><a href="/settings">Settings</a></li>
 							<li><SignOut {supabase} /></li>
 						</ul>
@@ -152,6 +159,18 @@
 					{/if}
 				</details>
 			</div>
+		</div>
+
+		<!-- Mobile Menu -->
+		<div
+			class="bg-base-100 text-base-content shadow rounded-box p-4 transition duration-300 ease-in-out md:hidden"
+			class:block={isMobileMenuOpen}
+			class:hidden={!isMobileMenuOpen}
+		>
+			<ul class="flex flex-col space-y-4">
+				<NavLinks isMobile={true} />
+			</ul>
+		</div>
 	</nav>
 </header>