Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: language selector speech bubble, profile menu on mobile, hide redundant hamburger

Browse Source 
- LanguageSelector: add speech bubble tail, replace green active with
  nord8 blue + dark text, remove floating gap
- Header: hide hamburger menu on mobile when no links, show profile
  picture directly in top bar instead
- UserHeader: center mobile dropdown, fix tail color/position, add
  profile picture overlay to tuck tail behind, add drop shadow
- Main layout: stop passing empty links snippet
This commit is contained in:
Alexander Bocken
2026-02-17 13:22:16 +01:00
parent e1a138e4be
commit f2d8b29fd5
4 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Header.svelte
+14 -2
View File
@@ -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{
<a href="/" aria-label="Home"><Symbol></Symbol></a>
<div class="right-buttons">
{@render language_selector_mobile?.()}
<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu" />
<label for="nav-toggle" class=nav_button aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></label>
{#if links}
<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu" />
<label for="nav-toggle" class=nav_button aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></label>
{:else}
{@render right_side?.()}
{/if}
</div>
</div>
<div class="header-shadow"></div>