From ec8adbf8074b78683ebe410bc212a54a432b9358 Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 22 Oct 2024 21:35:05 +0100
Subject: [PATCH] refactor(#35): Add dropdown and closing logic to parent nav
 link

---
 src/lib/components/NavLinkParent.svelte | 37 ++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/NavLinkParent.svelte b/src/lib/components/NavLinkParent.svelte
index b08255b..4988000 100644
--- a/src/lib/components/NavLinkParent.svelte
+++ b/src/lib/components/NavLinkParent.svelte
@@ -1,16 +1,45 @@
 <script lang="ts">
   import { type NavLinkItem } from '$lib/types/Nav/NavLinkItem';
+	import { onMount } from '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>
 
-<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">
+<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>
-</details>
+</div>
\ No newline at end of file