TekH
ba9f233993
Introduced a Language Selector component (`LanguageSelector.razor`) to enable users to switch between German, English, and French. The component includes a dropdown UI with flag icons and language labels, along with logic for toggling the dropdown and changing the app's culture. Injected `IJSRuntime`, `NavigationManager`, and `CultureService` into the component to handle culture changes and navigation updates. Updated `MainLayout.razor` to include the Language Selector in the footer. Refactored footer layout in `MainLayout.razor.css` to use flexbox for better alignment and spacing. Added styles for the Language Selector in `app.css` to ensure a clean and responsive design. Integrated the `flag-icons` library in `index.html` to display flag icons for language representation.
63 lines
1.9 KiB
Plaintext
63 lines
1.9 KiB
Plaintext
@using System.Globalization
|
|
@using EnvelopeGenerator.ReceiverUI.Services
|
|
@inject IJSRuntime JSRuntime
|
|
@inject NavigationManager Navigation
|
|
@inject CultureService CultureService
|
|
|
|
<div class="language-selector">
|
|
<button class="language-selector__trigger" @onclick="ToggleDropdown" aria-label="Select Language">
|
|
<span class="fi fi-@GetFlagCode(CurrentCulture)"></span>
|
|
<span class="language-selector__arrow">?</span>
|
|
</button>
|
|
|
|
@if (isOpen)
|
|
{
|
|
<div class="language-selector__dropdown">
|
|
<button class="language-selector__option" @onclick="@(() => ChangeLanguageAsync("de-DE"))">
|
|
<span class="fi fi-de"></span>
|
|
<span>Deutsch</span>
|
|
</button>
|
|
<button class="language-selector__option" @onclick="@(() => ChangeLanguageAsync("en-US"))">
|
|
<span class="fi fi-us"></span>
|
|
<span>English</span>
|
|
</button>
|
|
<button class="language-selector__option" @onclick="@(() => ChangeLanguageAsync("fr-FR"))">
|
|
<span class="fi fi-fr"></span>
|
|
<span>Français</span>
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@code {
|
|
private bool isOpen = false;
|
|
private string CurrentCulture => CultureInfo.CurrentCulture.Name;
|
|
|
|
private void ToggleDropdown()
|
|
{
|
|
isOpen = !isOpen;
|
|
}
|
|
|
|
private async Task ChangeLanguageAsync(string culture)
|
|
{
|
|
if (CultureInfo.CurrentCulture.Name != culture)
|
|
{
|
|
await CultureService.SetCultureAsync(culture);
|
|
Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
|
|
}
|
|
|
|
isOpen = false;
|
|
}
|
|
|
|
private string GetFlagCode(string culture)
|
|
{
|
|
return culture switch
|
|
{
|
|
"de-DE" => "de",
|
|
"en-US" => "us",
|
|
"fr-FR" => "fr",
|
|
_ => "de"
|
|
};
|
|
}
|
|
}
|