From 00fb76ca4fc2b0d2aea2b7e7954de54067cf6b87 Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 29 Oct 2024 21:29:09 +0000
Subject: [PATCH] refactor(#35): add keys to navlink loops

---
 src/lib/components/navigation/Nav.svelte           | 2 ++
 src/lib/components/navigation/NavLinkParent.svelte | 4 ++--
 src/lib/components/navigation/NavLinks.svelte      | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/navigation/Nav.svelte b/src/lib/components/navigation/Nav.svelte
index ce153f3..82e3dfd 100644
--- a/src/lib/components/navigation/Nav.svelte
+++ b/src/lib/components/navigation/Nav.svelte
@@ -21,6 +21,7 @@
 </script>
 
 <nav class="bg-primary text-primary-content p-4">
+    <!-- Nav Container -->
 	<div class="container mx-auto flex justify-between items-center">
 		<!-- Hamburger Menu Button (Mobile) -->
 		<div class="lg:hidden mr-4">
@@ -47,6 +48,7 @@
 				<NavLinks isMobile {session} {supabase} />
 			</Dropdown>
 		</div>
+        <!-- Logo -->
 		<a href="/" class="text-white font-bold text-xl">SvelteKit SaaS Boilerplate</a>
 		<div class="hidden lg:block">
 			<NavLinks {session} />
diff --git a/src/lib/components/navigation/NavLinkParent.svelte b/src/lib/components/navigation/NavLinkParent.svelte
index 9f88408..9e28f84 100644
--- a/src/lib/components/navigation/NavLinkParent.svelte
+++ b/src/lib/components/navigation/NavLinkParent.svelte
@@ -17,7 +17,7 @@
 {#if !isMobile}
 	<Dropdown indicator>
 		<div slot="dropdown">{linkItem.text}</div>
-		{#each linkItem.children ?? [] as child}
+		{#each linkItem.children ?? [] as child (child.text.replace(' ', '-').toLowerCase())}
 			<li><NavLink linkItem={child} /></li>
 		{/each}
 	</Dropdown>
@@ -34,7 +34,7 @@
 			class="menu-dropdown menu-dropdown-show"
 			transition:slide={{ duration: 200, easing: cubicInOut }}
 		>
-			{#each linkItem.children ?? [] as child}
+			{#each linkItem.children ?? [] as child (child.text.replace(' ', '-').toLowerCase())}
                 <li><NavLink linkItem={child} {supabase} /></li>
 			{/each}
 		</ul>
diff --git a/src/lib/components/navigation/NavLinks.svelte b/src/lib/components/navigation/NavLinks.svelte
index 3000f28..893b792 100644
--- a/src/lib/components/navigation/NavLinks.svelte
+++ b/src/lib/components/navigation/NavLinks.svelte
@@ -67,7 +67,7 @@
 </script>
 
 <ul class:flex={!isMobile} class:space-x-4={!isMobile}>
-	{#each links as link}
+	{#each links as link (link.text.replace(' ', '-').toLowerCase())}
 		<li class:md:hidden={link.isUserAccount}>
 			{#if link.isParent}
 				<NavLinkParent linkItem={link} {isMobile} {supabase} />