From e5d643577472af522107da81bc455129c0756070 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 15:04:13 -0600
Subject: add outclick to menu

---
 src/components/AppHeader.svelte | 45 +++++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 44480ac8..cc147b0d 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -47,26 +47,31 @@
 				</button>
 			</a>
 			<div class="relative">
-				<button class="bg-white p-2 rounded-full  w-12 h-12" on:click={() => (showMenu = !showMenu)}
-					><Icon icon="menu" style="mx-auto" />
-				</button>
-				<div
-					class="{showMenu
-						? 'block'
-						: 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
-				>
-					<ul class="space-y-5 w-32">
-						{#each menuButtons as button}
-							<li>
-								<button
-									class="flex justify-center items-center font-semibold text-sm"
-									on:click={() => handleMenuItemClick(button.goto)}
-									><Icon icon={button.icon} style="mr-1" /> {button.title}
-								</button>
-							</li>
-						{/each}
-					</ul>
-				</div>
+				<OutClick on:outclick={() => (showMenu = false)}>
+					<button
+						class="bg-white p-2 rounded-full  w-12 h-12"
+						on:click={() => (showMenu = !showMenu)}
+						><Icon icon="menu" style="mx-auto" />
+					</button>
+
+					<div
+						class="{showMenu
+							? 'block'
+							: 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
+					>
+						<ul class="space-y-5 w-32">
+							{#each menuButtons as button}
+								<li>
+									<button
+										class="flex justify-center items-center font-semibold text-sm"
+										on:click={() => handleMenuItemClick(button.goto)}
+										><Icon icon={button.icon} style="mr-1" /> {button.title}
+									</button>
+								</li>
+							{/each}
+						</ul>
+					</div>
+				</OutClick>
 			</div>
 		{:else}
 			<a href="/login">
-- 
cgit v1.2.3