refactor language selector into separate component
Extract language switching functionality from UserHeader into a new LanguageSelector component. In mobile view, the selector appears in the top bar next to the hamburger menu. In desktop view, it appears in the navigation bar to the left of the UserHeader. - Create LanguageSelector component with local element bindings - Update Header component with language_selector_mobile and language_selector_desktop slots - Remove language selector code from UserHeader - Update recipe and main layouts to use new component - Hide desktop language selector inside mobile hamburger menu
This commit is contained in:
@@ -79,6 +79,16 @@ nav[hidden]{
|
||||
display: none;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
.right-buttons{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.header-right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
:global(svg.symbol){
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
@@ -174,18 +184,32 @@ footer{
|
||||
:global(.site_header li:focus-within){
|
||||
transform: unset;
|
||||
}
|
||||
.nav_site .header-right{
|
||||
flex-direction: column;
|
||||
}
|
||||
.language-selector-desktop{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class=wrapper lang=de>
|
||||
<div>
|
||||
<div class=button_wrapper>
|
||||
<a href="/"><Symbol></Symbol></a>
|
||||
<button class=nav_button on:click={() => {toggle_sidebar()}}><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></button>
|
||||
<div class="right-buttons">
|
||||
<slot name=language_selector_mobile></slot>
|
||||
<button class=nav_button on:click={() => {toggle_sidebar()}}><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></button>
|
||||
</div>
|
||||
</div>
|
||||
<nav hidden class=nav_site>
|
||||
<a class=entry href="/"><Symbol></Symbol></a>
|
||||
<slot name=links></slot>
|
||||
<slot name=right_side></slot>
|
||||
<div class="header-right">
|
||||
<div class="language-selector-desktop">
|
||||
<slot name=language_selector_desktop></slot>
|
||||
</div>
|
||||
<slot name=right_side></slot>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
Reference in New Issue
Block a user