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:
2025-12-27 09:46:04 +01:00
parent 409180e94f
commit 8d5d64a9bd
5 changed files with 212 additions and 174 deletions

View File

@@ -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>