diff options
| author | secondl1ght <[email protected]> | 2022-08-02 15:04:13 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-08-02 15:04:13 -0600 |
| commit | 23aaf2223f3a9735455d4a864db4f56f4c701091 (patch) | |
| tree | a1ee848b1348f16d81c05f2346046f76b6616942 /src/components/AppHeader.svelte | |
| parent | 2bc5b0f7ee96dd42edf1d534f7e841c5ef6054a4 (diff) | |
| download | coinos-ui-23aaf2223f3a9735455d4a864db4f56f4c701091.tar.gz coinos-ui-23aaf2223f3a9735455d4a864db4f56f4c701091.zip | |
add outclick to menu
Diffstat (limited to 'src/components/AppHeader.svelte')
| -rw-r--r-- | src/components/AppHeader.svelte | 45 |
1 files changed, 25 insertions, 20 deletions
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"> |