From e4438d552b2861f018e11d87cb4c3bc57959acf7 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 4 Jun 2024 20:10:32 +0100
Subject: [PATCH 1/2] feat(#2): Begin replacing navbar

---
 src/lib/components/NavLinks.svelte | 17 +++++++++++++++++
 src/routes/+layout.svelte          | 28 +++++-----------------------
 2 files changed, 22 insertions(+), 23 deletions(-)
 create mode 100644 src/lib/components/NavLinks.svelte

diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte
new file mode 100644
index 0000000..8a812a4
--- /dev/null
+++ b/src/lib/components/NavLinks.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let isMobile: boolean = false;
+</script>
+
+<li><a href="/products">Products</a></li>
+<li class={isMobile ? '' : 'dropdown'}>
+	<div tabindex="0" role="button" class="">Parent</div>
+	<ul
+		class="{isMobile
+			? ''
+			: 'dropdown-content rounded-box w-52 shadow'} z-[1] menu p-2 bg-base-100 text-base-content"
+	>
+		<li><a href="/">Submenu 1</a></li>
+		<li><a href="/">Submenu 2</a></li>
+	</ul>
+</li>
+<li><a href="/">Item 3</a></li>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 88063d5..9d0af14 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,6 +8,7 @@
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
 	import CookieConsent from '$lib/components/CookieConsent.svelte';
+	import NavLinks from '$lib/components/NavLinks.svelte';
 
 	export let data;
 	let { supabase, session } = data;
@@ -62,7 +63,7 @@
 </svelte:head>
 
 <header>
-	<div class="navbar bg-primary text-primary-content">
+	<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">
@@ -83,33 +84,14 @@
 				<ul
 					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52"
 				>
-					<li><a href="/products">Products</a></li>
-					<li>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a>Parent</a>
-						<ul class="p-2">
-							<li><a href="/">Submenu 1</a></li>
-							<li><a href="/">Submenu 2</a></li>
-						</ul>
-					</li>
-					<li><a href="/">Item 3</a></li>
+					<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">
-				<li><a href="/products">Products</a></li>
-				<li>
-					<details>
-						<summary>Parent</summary>
-						<ul class="p-2 text-base-content">
-							<li><a href="/">Submenu 1</a></li>
-							<li><a href="/">Submenu 2</a></li>
-						</ul>
-					</details>
-				</li>
-				<li><a href="/">Item 3</a></li>
+				<NavLinks isMobile={false} />
 			</ul>
 		</div>
 		<div class="navbar-end">
@@ -170,7 +152,7 @@
 				{/if}
 			</div>
 		</div>
-	</div>
+	</nav>
 </header>
 
 <main>

From ca40b8403a269a74ed7ada13c869b0b67b1b25dc Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 4 Jun 2024 20:22:19 +0100
Subject: [PATCH 2/2] feat(#2): Add chevron to dropdown parent

---
 src/lib/components/NavLinks.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte
index 8a812a4..fb054f5 100644
--- a/src/lib/components/NavLinks.svelte
+++ b/src/lib/components/NavLinks.svelte
@@ -4,7 +4,13 @@
 
 <li><a href="/products">Products</a></li>
 <li class={isMobile ? '' : 'dropdown'}>
-	<div tabindex="0" role="button" class="">Parent</div>
+	{#if isMobile}
+		<div tabindex="0" role="button" class="">Parent</div>
+	{:else}
+		<details>
+			<summary>Parent</summary>
+		</details>
+	{/if}
 	<ul
 		class="{isMobile
 			? ''