diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 21939a1..9f66acc 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -183,6 +183,14 @@ nav{ align-items: center; gap: 0.5rem; } +.right-buttons :global(button){ + margin-bottom: 0 !important; +} +.right-buttons :global(#options){ + top: calc(100% + 10px) !important; + bottom: unset !important; + right: 0 !important; +} .header-right{ display: flex; align-items: center; @@ -335,8 +343,12 @@ footer{
{@render language_selector_mobile?.()} - - + {#if links} + + + {:else} + {@render right_side?.()} + {/if}
diff --git a/src/lib/components/LanguageSelector.svelte b/src/lib/components/LanguageSelector.svelte index a8cbe81..ba50246 100644 --- a/src/lib/components/LanguageSelector.svelte +++ b/src/lib/components/LanguageSelector.svelte @@ -194,6 +194,15 @@ z-index: 1000; display: none; } + .language-options::after { + content: ""; + border: 10px solid transparent; + border-bottom-color: var(--bg_color); + border-top: 0; + position: absolute; + top: -10px; + right: 1rem; + } /* Show via JS toggle */ .language-options.open { display: block; @@ -222,7 +231,9 @@ background-color: var(--nord2); } .language-options a.active{ - background-color: var(--nord14); + background-color: var(--nord8); + color: var(--nord0); + font-weight: 700; } diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte index cfade3e..58e2e2c 100644 --- a/src/lib/components/UserHeader.svelte +++ b/src/lib/components/UserHeader.svelte @@ -81,6 +81,7 @@ background-color: var(--bg_color); width: 30ch; padding: 1rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } #options ul{ color: white; @@ -116,22 +117,31 @@ h2 + p{ #options{ top: unset; bottom: calc(100% + 15px); - right: -200%; - z-index: 99999999999999999999; + left: 50%; + right: unset; + transform: translateX(-50%); + z-index: 10; } .top.speech::after { - /* (B2-1) DOWN TRIANGLE */ - border-top-color: #a53d38; - border-bottom: 0; - z-index: 99999999999999999999; - - /* (B2-2) POSITION AT BOTTOM */ - bottom: -20px; left: 50%; + border: 20px solid transparent; + border-top-color: var(--bg_color); + border-bottom-width: 0; + top: unset; + bottom: -20px; + left: 50%; margin-left: -20px; } button{ margin-bottom: 2rem; } + button::before{ + content: ""; + position: absolute; + inset: 0; + border-radius: 50%; + background: inherit; + z-index: 20; + } } diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte index 47fd776..d799941 100644 --- a/src/routes/(main)/+layout.svelte +++ b/src/routes/(main)/+layout.svelte @@ -8,11 +8,6 @@ let user = $derived(data.session?.user);
- {#snippet links()} - - {/snippet} - {#snippet language_selector_mobile()} {/snippet}