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

fix: render desktop nav at all widths when no links, fix profile menu positioning
All checks were successful
CI / update (push) Successful in 8s
Details

Browse Source 
Skip mobile sidebar/hamburger entirely when no links snippet is provided.
The nav with .no-links class stays in desktop layout at all screen widths.
Override UserHeader mobile styles from .no-links context to keep dropdown
opening downward with tail centered below the profile picture.
This commit is contained in:
Alexander Bocken
2026-02-17 15:59:02 +01:00
parent cf73e6b62f
commit 16d891fc2f
1 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/lib/components/Header.svelte
View File

@@ -183,14 +183,6 @@ nav{
align-items: center; align-items: center;
gap: 0.5rem; 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{ .header-right{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -266,7 +258,7 @@ footer{
fill: var(--nord8); fill: var(--nord8);
scale: 0.9; scale: 0.9;
} }
.nav_site{ .nav_site:not(.no-links){
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@@ -277,28 +269,28 @@ footer{
flex-direction: column; flex-direction: column;
padding-inline: 0.5rem; padding-inline: 0.5rem;
} }
.nav_site::before{ .nav_site:not(.no-links)::before{
content: ''; content: '';
flex: 1; flex: 1;
} }
:global(.nav_site ul){ :global(.nav_site:not(.no-links) ul){
width: 100% ; width: 100% ;
} }
.nav_site :first-child{ .nav_site:not(.no-links) :first-child{
display:none; display:none;
} }
.nav_site{ .nav_site:not(.no-links){
transform: translateX(100%); transform: translateX(100%);
} }
.wrapper:has(.nav-toggle:checked) .nav_site{ .wrapper:has(.nav-toggle:checked) .nav_site:not(.no-links){
transform: translateX(0); transform: translateX(0);
transition: transform 100ms; transition: transform 100ms;
} }
:global(.nav_site a:last-child){ :global(.nav_site:not(.no-links) a:last-child){
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.nav_site .links-wrapper { .nav_site:not(.no-links) .links-wrapper {
width: 100%; width: 100%;
padding: 0 2rem; padding: 0 2rem;
} }
@@ -316,14 +308,14 @@ footer{
:global(.site_header li:focus-within){ :global(.site_header li:focus-within){
transform: unset; transform: unset;
} }
.nav_site .header-right{ .nav_site:not(.no-links) .header-right{
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
bottom: 2rem; bottom: 2rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.language-selector-desktop{ .nav_site:not(.no-links) .language-selector-desktop{
display: none; display: none;
} }
.active-underline { .active-underline {
@@ -336,23 +328,44 @@ footer{
text-underline-offset: 0.3rem; text-underline-offset: 0.3rem;
} }
} }
.no-links :global(button) {
margin-bottom: 0 !important;
}
.no-links :global(#options) {
top: calc(100% + 10px) !important;
bottom: unset !important;
right: 0 !important;
left: unset !important;
transform: none !important;
}
.no-links :global(.top.speech::after) {
border: 20px solid transparent !important;
border-bottom-color: var(--nord3) !important;
border-top: 0 !important;
top: -10px !important;
bottom: unset !important;
left: unset !important;
right: 0.25rem !important;
margin-left: 0 !important;
}
.no-links :global(button::before) {
display: none;
}
</style> </style>
<div class=wrapper lang=de> <div class=wrapper lang=de>
<div> <div>
{#if links}
<div class=button_wrapper> <div class=button_wrapper>
<a href="/" aria-label="Home"><Symbol></Symbol></a> <a href="/" aria-label="Home"><Symbol></Symbol></a>
<div class="right-buttons"> <div class="right-buttons">
{@render language_selector_mobile?.()} {@render language_selector_mobile?.()}
{#if links} <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu" />
<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>
<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> </div>
<div class="header-shadow"></div> <div class="header-shadow"></div>
<nav class=nav_site> {/if}
<nav class=nav_site class:no-links={!links}>
<a href="/" aria-label="Home"><Symbol></Symbol></a> <a href="/" aria-label="Home"><Symbol></Symbol></a>
<div class="links-wrapper"> <div class="links-wrapper">
{@render links?.()} {@render links?.()}