From 7d0e9ee8f61ae5b6eed558c79b3aab8d98006afa Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Thu, 24 Jul 2025 14:36:02 +0200
Subject: [PATCH] Enhance header component with translation support and improve
 navigation links

- Imported the getTranslation function to provide localized text for the contact link in the header.
- Updated the navigation link filtering to use href instead of text, ensuring language independence.
- Adjusted the translations for the contact link to enhance accessibility and user experience.
- Refined the translations for applied skills in the i18n module for consistency.
---
 src/components/widgets/Header.astro | 21 ++++++++++++++-------
 src/i18n/translations.ts            |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 249e680..2788123 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -33,7 +33,7 @@ export interface Props {
   position?: string;
 }
 
-import { supportedLanguages } from '~/i18n/translations';
+import { supportedLanguages, getTranslation } from '~/i18n/translations';
 
 // Get current language from URL
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
@@ -67,10 +67,12 @@ if (!currentLang) {
 
 // Get translated header data - ensure we're using the current language
 const headerData = getHeaderData(currentLang);
+// Get translations for the current language
+const t = getTranslation(currentLang);
 
-// Filter out the Contact link for the main nav
-const navLinks = headerData.links.filter(link => link.text?.toLowerCase() !== 'contact');
-const contactLink = headerData.links.find(link => link.text?.toLowerCase() === 'contact');
+// 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 {
   id = 'header',
@@ -189,9 +191,14 @@ const {
       <div class="items-center flex justify-between w-full md:w-auto">
         <div class="flex items-center">
           {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
-          {/* Contact Icon */}
+          {/* Contact Icon with proper translation */}
           {contactLink && (
-            <a href={contactLink.href} aria-label="Contact" title="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]">
+            <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>
           )}
@@ -201,4 +208,4 @@ const {
       </div>
     </div>
   </div>
-</header>
+</header>
\ No newline at end of file
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index db10357..39d0fdb 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -1156,7 +1156,7 @@ export const translations: Record<string, Translation> = {
       resume: 'Lebenslauf',
       certifications: 'Zertifizierungen',
       skills: 'Fähigkeiten',
-      appliedSkills: 'Angewandte Fähigkeiten',
+      appliedSkills: 'Fähigkeiten',
       education: 'Ausbildung',
       blog: 'Blog',
       services: 'Dienstleistungen',