diff options
| author | Adam Soltys <[email protected]> | 2024-01-02 22:53:14 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2024-01-02 22:53:14 -0800 |
| commit | 7e33d06f2952f64815d8c7669f0f057cde20d280 (patch) | |
| tree | 30d93e2ca867ef2ca81861c5aefe658982170af7 /src/components | |
| parent | 6cf4bc7439099cebbfff8bb1869301dde4c2b064 (diff) | |
| download | coinos-ui-7e33d06f2952f64815d8c7669f0f057cde20d280.tar.gz coinos-ui-7e33d06f2952f64815d8c7669f0f057cde20d280.zip | |
fix menu z-index
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppHeader.svelte | 73 |
1 files changed, 38 insertions, 35 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 53dd8ebf..26982456 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -109,41 +109,44 @@ ><Icon icon="menu" style="mx-auto w-6 md:w-8" /> </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-48"> - {#each menuButtons as { href, icon, key }} - <li> - <a {href} data-sveltekit-prefetch="off"> - <button class="flex justify-center items-center font-semibold hover:opacity-80" - ><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)} - </button> - </a> - </li> - {/each} - </ul> - <hr class="my-4" /> - <a href="/"><img src="/images/logo.svg" alt="Swapee" class="w-32" /></a> - </div> - </OutClick> - </div> - {:else} - <a href={`/login?redirect=${$page.url.pathname}`}> - <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm" - >{$t('nav.signIn')}</button - > - </a> - {/if} - </nav> - <div - class="absolute md:w-[64px] md:mx-auto lg:left-[138px] left-[calc(50vw-64px)] -bottom-[64px] z-30" - > - <Avatar user={subject} /> - </div> -</header> + <div + class="{showMenu + ? 'block' + : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z-50" + > + <ul class="space-y-5 w-48"> + {#each menuButtons as { href, icon, key }} + <li> + <a {href} data-sveltekit-prefetch="off"> + <button + class="flex justify-center items-center font-semibold hover:opacity-80" + ><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)} + </button> + </a> + </li> + {/each} + </ul> + <hr class="my-4" /> + <a href="/" + ><img src="/images/logo.svg" alt="Swapee" class="w-32" /></a + > + </div> + </OutClick> + </div> + {:else} + <a href={`/login?redirect=${$page.url.pathname}`}> + <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm" + >{$t("nav.signIn")}</button + > + </a> + {/if} + </nav> + <div + class="absolute md:w-[64px] md:mx-auto lg:left-[164px] left-[calc(50vw-64px)] -bottom-[64px] z-30" + > + <Avatar user={subject} /> + </div> + </header> {/if} <style> |