fix: render desktop nav at all widths when no links, fix profile menu positioning
All checks were successful
CI / update (push) Successful in 8s
All checks were successful
CI / update (push) Successful in 8s
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:
@@ -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?.()}
|
||||||
|
|||||||
Reference in New Issue
Block a user