refactor(#35): split nav into components control via JSON

src/lib/components/Nav.svelte

@@ -25,10 +25,9 @@
   });
 </script>
 
+
 <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
@@ -47,12 +46,8 @@
       </svg>
     </button>
 
-    <!-- Navbar Links (hidden on mobile, visible on larger screens) -->
+    <a href="/" class="text-white font-bold text-xl">SvelteKit SaaS Boilerplate</a>
-    <div class="hidden md:flex space-x-4">
+    <NavLinks />
-      <ul class="flex flex-col md:flex-row md:space-x-4">
-        <NavLinks isMobile={false} />
-      </ul>
-    </div>
 
     <!-- Right Side: Basket & User Account -->
     <div class="flex items-center space-x-4">
@@ -83,7 +78,7 @@
           <div class="w-10 rounded-full">
             {#if session?.user}
               <div class="user-circle text-primary-content border-primary-content">
-                {session?.user.email[0].toUpperCase()}
+                {session?.user.email ? session?.user.email[0].toUpperCase() : '?'}
               </div>
             {:else}
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -116,15 +111,4 @@
       </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>

src/lib/components/NavLinkParent.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { type NavLinkItem } from '$lib/types/Nav/NavLinkItem';
+
+  export let text: string;
+  export let children: NavLinkItem[] | undefined;
+
+</script>
+
+<details>
+  <summary class="flex items-center"><span class="mr-1">&#x25BC;</span>{text}</summary>
+  <ul class="absolute rounded-box w-52 shadow z-[1] menu p-2 bg-base-100 text-base-content">
+    {#each children ?? [] as child}
+      <li><a href={child.href}>{child.text}</a></li>
+    {/each}
+  </ul>
+</details>

src/lib/components/NavLinks.svelte

@@ -1,23 +1,41 @@
 <script lang="ts">
-	export let isMobile: boolean = false;
+	import { type NavLinkItem } from '$lib/types/Nav/NavLinkItem';
+	import NavLinkParent from './NavLinkParent.svelte';
+
+	const links: NavLinkItem[] = [
+		{
+			text: 'Products',
+			href: '/products',
+		},
+		{
+			text: 'Parent',
+			isParent: true,
+			children: [
+				{
+					text: 'Submenu 1',
+					href: '/',
+				},
+				{
+					text: 'Submenu 2',
+					href: '/',
+				},
+			],
+		},
+		{
+			text: 'Example Product',
+			href: '/tools/exampleproduct',
+		},
+	];
 </script>
 
-<li><a href="/products">Products</a></li>
+<ul class="flex space-x-4">
-<li class={isMobile ? '' : 'dropdown'}>
+	{#each links as link}
-	{#if isMobile}
+		<li class="relative">
-		<div tabindex="0" role="button" class="">Parent</div>
+			{#if link.isParent}
-	{:else}
+				<NavLinkParent text={link.text} children={link.children} />
-		<details>
+			{:else}
-			<summary class="flex items-center"><span class="mr-1">&#x25BC;</span>Parent </summary>
+				<a href={link.href}>{link.text}</a>
-		</details>
+			{/if}
-	{/if}
+		</li>
-	<ul
+	{/each}
-		class="{isMobile
+</ul>
-			? ''
-			: '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="/tools/exampleproduct">Example Product</a></li>

src/lib/types/Nav/NavLinkItem.ts

@@ -0,0 +1,6 @@
+export interface NavLinkItem {
+  text: string;
+  href?: string;
+  isParent?: boolean;
+  children?: NavLinkItem[];
+}