diff options
Diffstat (limited to 'src/components/Menu.svelte')
| -rw-r--r-- | src/components/Menu.svelte | 23 |
1 files changed, 11 insertions, 12 deletions
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" |