hide menu on click

2 files changed, 12 insertions, 15 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 4ec890b4..7033f581 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -11,8 +11,6 @@
   let w;
   $: if (!subject) subject = user;
 
-  let showMenu = false;
-
   $: bg =
     $banner?.id && $banner.id === subject.id
       ? `url(${$banner.src})`
@@ -64,7 +62,7 @@
             </button>
           </a>
         {/each}
-        <Menu bind:showMenu {w} {user} t={$t} {opacity} />
+        <Menu {opacity} {user} t={$t} {w} />
       {:else}
         <a href={`/login?redirect=${$page.url.pathname}`}>
           <button class="btn !rounded-full">{$t("nav.signIn")}</button>
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index c7f28e19..6402928e 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -1,9 +1,10 @@
 <script>
   import { theme } from "$lib/store";
   import OutClick from "svelte-outclick";
-  export let showMenu, t, user, w, opacity;
+  export let t, user, w, opacity;
 
   let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
+  let showMenu = false;
 
   let menuButtons;
   $: if (user)
@@ -19,24 +20,21 @@
       { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` },
       { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` },
     ];
+
+  let hideMenu = () => (showMenu = false);
+  let toggleMenu = () => (showMenu = !showMenu);
 </script>
 
 <div>
-  <OutClick on:outclick={() => (showMenu = false)}>
-    <button
-      class="btn-menu {opacity('/support')}"
-      on:click={() => {
-        console.log("YEAH");
-        showMenu = !showMenu;
-        console.log(showMenu);
-      }}
+  <OutClick on:outclick={hideMenu}>
+    <button class="btn-menu {opacity('/support')}" on:click={toggleMenu}
       ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24} />
     </button>
 
     <div
-      class="{showMenu
-        ? 'block'
-        : 'hidden'} absolute top-14 right-0 bg-base-100 rounded-3xl p-8 shadow-xl z-50"
+      class="absolute top-14 right-0 bg-base-100 rounded-3xl p-8 shadow-xl z-50"
+      class:hidden={!showMenu}
+      class:block={showMenu}
     >
       <ul class="space-y-5 w-48">
         {#each menuButtons as { href, icon, key }}
@@ -59,6 +57,7 @@
                 {href}
                 data-sveltekit-preload-code="eager"
                 data-sveltekit-preload-data="false"
+                on:click={hideMenu}
               >
                 <button
                   class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"