diff --git a/components/languageSelector/LanguageSelect.tsx b/components/languageSelector/LanguageSelect.tsx index 317dc9809d0f..5781afb3feeb 100644 --- a/components/languageSelector/LanguageSelect.tsx +++ b/components/languageSelector/LanguageSelect.tsx @@ -11,7 +11,12 @@ import IconLanguage from '../icons/Language'; * @param {Array} [props.options=[]] - An array of options for the select dropdown. * @param {string} props.selected - The currently selected option value. */ -export default function LanguageSelect({ className = '', onChange = () => {}, options = [], selected }: SelectProps) { +export default function LanguageSelect({ className = '', onChange = () => { }, options = [], selected }: SelectProps) { + const langMap: { [key: string]: string } = { + en: 'English', + de: 'Deutsch' + }; + return (
@@ -27,7 +32,7 @@ export default function LanguageSelect({ className = '', onChange = () => {}, op > {options.map((option, index) => ( ))} diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx index 29eb933c0b56..9a86915f552a 100644 --- a/components/navigation/MobileNavMenu.tsx +++ b/components/navigation/MobileNavMenu.tsx @@ -30,7 +30,7 @@ interface MobileNavMenuProps { * @param {MobileNavMenuProps} props - The props for the MobileNavMenu component. */ export default function MobileNavMenu({ - onClickClose = () => {}, + onClickClose = () => { }, uniqueLangs, currentLanguage, changeLanguage @@ -50,6 +50,11 @@ export default function MobileNavMenu({ setOpen(menu); } + const langMap: { [key: string]: string } = { + en: 'English', + de: 'Deutsch' + }; + return (
@@ -153,7 +158,7 @@ export default function MobileNavMenu({ className={`mb-4 ml-2 block w-full rounded-lg py-1 text-start text-sm font-medium leading-6 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-50 ${currentLanguage.toLowerCase() === lang.text.toLowerCase() ? 'text-secondary-500' : ''}`} data-testid='MobileNav-language-item' > - {lang.text} + {langMap[lang.text.toLowerCase()] || lang.text} ))}
diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx index 82dbfa758179..4c952fd5fb75 100644 --- a/components/navigation/NavBar.tsx +++ b/components/navigation/NavBar.tsx @@ -55,11 +55,10 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps // Filter unique languages based on i18nPaths that include the modified pathnameWithoutLocale const uniqueLangs = Object.keys(i18nPaths) - .filter((lang) => i18nPaths[lang].includes(pathnameWithoutLocale)) - .map((lang) => lang.toUpperCase()); + .filter((lang) => i18nPaths[lang].includes(pathnameWithoutLocale)); - // If no unique languages are found, default to ["EN"] - return uniqueLangs.length === 0 ? ['EN'] : uniqueLangs; + // If no unique languages are found, default to ['en'] + return uniqueLangs.length === 0 ? ['en'] : uniqueLangs; }; const uniqueLangs = getUniqueLangs().map((lang) => ({ @@ -233,7 +232,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps changeLanguage(value.toLowerCase(), true); }} className='' - selected={i18n.language ? i18n.language.toUpperCase() : 'EN'} + selected={i18n.language ? i18n.language : 'en'} /> setMobileMenuOpen(false)} uniqueLangs={uniqueLangs} - currentLanguage={i18n.language ? i18n.language.toUpperCase() : 'EN'} + currentLanguage={i18n.language ? i18n.language : 'en'} changeLanguage={changeLanguage} /> )}