refactor(#35): add keys to navlink loops

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} />

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>

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} />