From f20e856d449858c670308f32fe1cf2dfb40a92b7 Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 22 Oct 2024 21:43:31 +0100
Subject: [PATCH] refactor(#35): Split dropdown into standalone component

---
 src/lib/components/Dropdown.svelte      | 44 ++++++++++++++++++++++++
 src/lib/components/NavLinkParent.svelte | 45 ++++---------------------
 2 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/components/Dropdown.svelte

diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
new file mode 100644
index 0000000..d7068e3
--- /dev/null
+++ b/src/lib/components/Dropdown.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+  export let indicator: boolean = false;
+
+  let isOpen = false;
+  let dropdown: HTMLDivElement;
+  
+  const DropdownIcon = {
+    closed: '&#x25BC;',
+    open: '&#x25B2;'
+  };
+
+  onMount(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (!dropdown.contains(event.target as Node) && isOpen) {
+        isOpen = false;
+      }
+      if (event.target instanceof HTMLAnchorElement) {
+        isOpen = false;
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+</script>
+
+<div bind:this={dropdown}>
+  <div class="dropdown-title">
+    <button class="flex" on:click={() => isOpen = !isOpen}>
+      {#if indicator}
+        <span class="mr-1">{@html isOpen ? DropdownIcon.open : DropdownIcon.closed }</span>
+      {/if}
+      <slot name="dropdown"></slot>
+    </button>
+  </div>
+  <ul class:flex={isOpen} class:hidden={!isOpen} class="absolute rounded-box w-52 shadow z-[1] menu p-2 bg-base-100 text-base-content">
+    <slot />
+  </ul>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/NavLinkParent.svelte b/src/lib/components/NavLinkParent.svelte
index 4988000..b15005a 100644
--- a/src/lib/components/NavLinkParent.svelte
+++ b/src/lib/components/NavLinkParent.svelte
@@ -1,45 +1,14 @@
 <script lang="ts">
   import { type NavLinkItem } from '$lib/types/Nav/NavLinkItem';
-	import { onMount } from 'svelte';
+	import Dropdown from './Dropdown.svelte';
 
   export let text: string;
   export let children: NavLinkItem[] | undefined;
-
-  const DropdownIcon = {
-    closed: '&#x25BC;',
-    open: '&#x25B2;'
-  };
-
-  let isOpen = false;
-  let dropdown: HTMLDivElement;
-
-  onMount(() => {
-    const handleClick = (event: MouseEvent) => {
-      if (!dropdown.contains(event.target as Node) && isOpen) {
-        isOpen = false;
-      }
-      if (event.target instanceof HTMLAnchorElement) {
-        isOpen = false;
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  });
 </script>
 
-<div bind:this={dropdown}>
-  <div class="dropdown-title">
-    <button on:click={() => isOpen = !isOpen}>
-      <span class="mr-1">{@html isOpen ? DropdownIcon.open : DropdownIcon.closed }</span>{text}
-    </button>
-  </div>
-  <ul class:flex={isOpen} class:hidden={!isOpen} 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>
-</div>
\ No newline at end of file
+<Dropdown indicator>
+  <div slot="dropdown">{text}</div>
+  {#each children ?? [] as child}
+    <li><a href={child.href}>{child.text}</a></li>
+  {/each}
+</Dropdown>
\ No newline at end of file