From d01b1fe60276aa9831a95a0d510248f4086181f6 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Sat, 22 Jul 2023 13:12:45 +0200
Subject: [PATCH] menu closes when clicking somwhere else

---
 src/lib/components/UserHeader.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte
index 62cac034..205e87ef 100644
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	export let username;
-	function show_options(){
+	function toggle_options(){
 		const el = document.querySelector("#options")
 		el.hidden = !el.hidden
 	}
 	let src="https://new.bocken.org/static/user/thumb/" +  username + ".webp"
+	onMount( () => {
+		document.addEventListener("click", (e) => {
+			const el = document.querySelector("#button")
+			if(!el.contains(e.target)){
+				document.querySelector("#options").hidden = true
+			}
+		})
+	})
 </script>
 <style>
 	/* (A) SPEECH BOX */
@@ -117,7 +126,7 @@ h2{
 </style>
 
 {#if username}
-	<button on:click={show_options} style="background-image: url({src})">
+	<button on:click={toggle_options} style="background-image: url({src})" id=button>
 	<div id=options class="speech top" hidden>
 			<h2>{username}</h2>
 			<ul>