Add Language Selector component to footer
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.
This commit is contained in:
62
EnvelopeGenerator.ReceiverUI/Shared/LanguageSelector.razor
Normal file
62
EnvelopeGenerator.ReceiverUI/Shared/LanguageSelector.razor
Normal file
@@ -0,0 +1,62 @@
|
||||
@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"
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user