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

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

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