365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update LanguageDropdown and Header components for improved localization and layout

Browse Source 
- Enhanced the LanguageDropdown component by updating language names to their native forms and adding non-breaking spaces for better readability.
- Refactored the Header component to improve layout, including a gap between icons and adjusted class attributes for better spacing.
- Ensured consistent filtering of navigation links and improved accessibility for the contact link.
This commit is contained in:
Richard Bergsma
2025-07-24 14:49:12 +02:00
parent 7d0e9ee8f6
commit 83a11a45fb
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/LanguageDropdown.astro
View File

@@ -11,10 +11,10 @@ const { currentLang } = Astro.props;
type SupportedLanguage = (typeof supportedLanguages)[number];
const languages = [
{ code: 'en' as SupportedLanguage, name: 'English', flag: 'gb' },
{ code: 'nl' as SupportedLanguage, name: 'Dutch', flag: 'nl' },
{ code: 'de' as SupportedLanguage, name: 'German', flag: 'de' },
{ code: 'fr' as SupportedLanguage, name: 'French', flag: 'fr' },
{ code: 'en' as SupportedLanguage, name: 'English\u00A0\u00A0', flag: 'gb' },
{ code: 'nl' as SupportedLanguage, name: 'Nederlands', flag: 'nl' },
{ code: 'de' as SupportedLanguage, name: 'Deutsch', flag: 'de' },
{ code: 'fr' as SupportedLanguage, name: 'Français', flag: 'fr' },
].filter((lang) => supportedLanguages.includes(lang.code));
const currentLanguage = languages.find((lang) => lang.code === currentLang) || languages[0];

34
src/components/widgets/Header.astro
View File

@@ -71,8 +71,8 @@ const headerData = getHeaderData(currentLang);
const t = getTranslation(currentLang);
// Filter out the Contact link for the main nav - use href instead of text to be language-independent
const navLinks = headerData.links.filter(link => !link.href?.includes('#contact'));
const contactLink = headerData.links.find(link => link.href?.includes('#contact'));
const navLinks = headerData.links.filter((link) => !link.href?.includes('#contact'));
const contactLink = headerData.links.find((link) => link.href?.includes('#contact'));
const {
id = 'header',
@@ -189,23 +189,27 @@ const {
]}
>
<div class="items-center flex justify-between w-full md:w-auto">
<div class="flex items-center">
<div class="flex items-center gap-2">
{showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
{/* Contact Icon with proper translation */}
{contactLink && (
<a
href={contactLink.href}
aria-label={t.navigation.contact}
title={t.navigation.contact}
class="hover:text-link dark:hover:text-white flex items-center hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2.5 transition-colors duration-200 mr-[10px]"
>
<Icon name="tabler:mail" class="w-6 h-6" />
</a>
)}
{
contactLink && (
<a
href={contactLink.href}
aria-label={t.navigation.contact}
title={t.navigation.contact}
class="hover:text-link dark:hover:text-white flex items-center hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2.5 transition-colors duration-200 gap-2"
>
<Icon name="tabler:mail" class="w-6 h-6" />
</a>
)
}
{/* Language Selector as Select Element */}
<LanguageDropdown currentLang={currentPath.split('/')[1] || 'en'} />
<div class="flex-shrink-0">
<LanguageDropdown currentLang={currentPath.split('/')[1] || 'en'} />
</div>
</div>
</div>
</div>
</div>
</header>
</header>