fix: i18n for smaller screen

components/navigation/MobileNavMenu.tsx

@@ -19,13 +19,16 @@ interface MenuItem {
 
 interface MobileNavMenuProps {
   onClickClose?: () => void;
+
+  uniqueLangs: { key: string; text: string; value: string }[];
+  changeLanguage: (locale: string, langPicker: boolean) => void;
 }
 
 /**
  * @description MobileNavMenu component for displaying a responsive navigation menu on mobile devices.
  * @param {MobileNavMenuProps} props - The props for the MobileNavMenu component.
  */
-export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenuProps) {
+export default function MobileNavMenu({ onClickClose = () => {}, uniqueLangs, changeLanguage }: MobileNavMenuProps) {
   const [open, setOpen] = useState<string | null>(null);
 
   /**
@@ -127,6 +130,43 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu
               </div>
             </div>
           </div>
+          <div className='space-y-2 px-5 py-2' onClick={() => showMenu('language')}>
+            <div className='grid gap-4'>
+              <div>
+                <h4 className='mb-4 flex justify-between font-medium text-gray-800'>
+                  <a className='flex cursor-pointer items-center gap-x-2'>
+                    Language{' '}
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      fill='none'
+                      viewBox='0 0 24 24'
+                      strokeWidth={1.5}
+                      stroke='currentColor'
+                      className='size-5'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802'
+                      />
+                    </svg>
+                  </a>
+                  <NavItemDropdown />
+                </h4>
+                {open === 'language' &&
+                  uniqueLangs.map((lang) => (
+                    <button
+                      key={lang.key}
+                      onClick={() => changeLanguage(lang.value.toLowerCase(), true)}
+                      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'
+                      data-testid='MobileNav-language-item'
+                    >
+                      {lang.text}
+                    </button>
+                  ))}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

components/navigation/NavBar.tsx

@@ -47,18 +47,20 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
   const getUniqueLangs = (): string[] => {
     let pathnameWithoutLocale = pathname;
 
-    // Check if the pathname includes "/[lang]", if so, replace it with an empty string
     if (pathname && pathname.includes('/[lang]')) {
       pathnameWithoutLocale = pathname.replace('/[lang]', '');
     }
 
-    // Filter unique languages based on i18nPaths that include the modified pathnameWithoutLocale
+    const langMap: { [key: string]: string } = {
+      en: 'English',
+      de: 'Deutsch'
+    };
+
     const uniqueLangs = Object.keys(i18nPaths)
       .filter((lang) => i18nPaths[lang].includes(pathnameWithoutLocale))
-      .map((lang) => lang.toUpperCase());
+      .map((lang) => langMap[lang] || lang);
 
-    // If no unique languages are found, default to ["EN"]
-    return uniqueLangs.length === 0 ? ['EN'] : uniqueLangs;
+    return uniqueLangs.length === 0 ? ['English'] : uniqueLangs;
   };
 
   const uniqueLangs = getUniqueLangs().map((lang) => ({
@@ -143,10 +145,19 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
     setMobileMenuOpen(false);
     setOpen(null);
   }, [asPath]);
+  const LanguageSelector = (
+    <LanguageSelect
+      options={uniqueLangs}
+      onChange={(value) => {
+        changeLanguage(value.toLowerCase(), true);
+      }}
+      selected={i18n.language ? i18n.language.toUpperCase() : 'EN'}
+    />
+  );
 
   return (
     <div className={`bg-white ${className} z-50`}>
-      <div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-10'>
+      <div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-2'>
         {!hideLogo && (
           <div className='lg:w-auto lg:flex-1'>
             <div className='flex'>
@@ -225,15 +236,8 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
               <IconLoupe />
             </SearchButton>
 
-            {/* // Language Picker Component */}
-            <LanguageSelect
-              options={uniqueLangs}
-              onChange={(value) => {
-                changeLanguage(value.toLowerCase(), true);
-              }}
-              className=''
-              selected={i18n.language ? i18n.language.toUpperCase() : 'EN'}
-            />
+            {/* // Language Selector for normal screen */}
+            {LanguageSelector}
 
             <GithubButton
               text='Star on GitHub'
@@ -246,7 +250,13 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
       </div>
 
       {/* Mobile menu, show/hide based on mobile menu state. */}
-      {mobileMenuOpen && <MobileNavMenu onClickClose={() => setMobileMenuOpen(false)} />}
+      {mobileMenuOpen && (
+        <MobileNavMenu
+          onClickClose={() => setMobileMenuOpen(false)}
+          uniqueLangs={uniqueLangs}
+          changeLanguage={changeLanguage}
+        />
+      )}
     </div>
   );
 }