asyncapi · akshatnema · Feb 11, 2024 · Sep 8, 2023 · Sep 9, 2023 · Sep 9, 2023
@@ -1,9 +1,19 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { defaultLanguage, languages } from "../lib/i18n";
+import i18nPaths from "../lib/i18nPaths";
 
 const LinkComponent = ({ children, locale, ...props }) => {
   const router = useRouter();
+
+  if (!router) {
+    return (
+      <Link href={props.href} passHref>
+        {children}
+      </Link>
+    );
+  }
+
   const { pathname, query, asPath } = router;
 
   // Detect current language
@@ -13,6 +23,14 @@ const LinkComponent = ({ children, locale, ...props }) => {
 
   let href = props.href || pathname;
 
+  if ((props.href && i18nPaths[language] && !i18nPaths[language].includes(href)) || href.includes("http", 0)) {
+    return (
+      <Link href={href} passHref>
+        {children}
+      </Link>
+    );
+  }
+
   if (locale) {
     if (props.href) {
       href = `/${locale}${href}`;

@@ -1,3 +1,4 @@
+import LinkComponent from '../link';
 import Paragraph from '../typography/Paragraph';
 import Label from './Label'
 import Link from 'next/link'
@@ -11,7 +12,7 @@ export default function MenuBlocks ({
         items.map((item, index) => {
           const isExternalHref = item.href && item.href.startsWith('http');
           return (
-            <Link href={item.comingSoon ? '' : item.href} key={index}>
+            <LinkComponent href={item.comingSoon ? '' : item.href} key={index}>
               <a data-testid="MenuBlocks-Link"
                 className="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150" 
                 target={isExternalHref ? "_blank" : undefined} 
@@ -29,7 +30,7 @@ export default function MenuBlocks ({
                   </Paragraph>
                 </div>
               </a>
-            </Link>
+            </LinkComponent>
           )
         })
       }

@@ -41,7 +41,7 @@ export default function NavBar({
   const changeLanguage = async (locale, langPicker) => {
 
     // Verifies if the language change is from langPicker or the browser-api
-    if(langPicker){
+    if (langPicker) {
       localStorage.setItem('i18nLang', locale);
     }
 
@@ -72,10 +72,9 @@ export default function NavBar({
     router.push(href);
   };
 
-  // To be enabled on the last PR
-  // useEffect(() => {
-  //   changeLanguage(browserLanguageDetector(), false);
-  // }, []);
+  useEffect(() => {
+    changeLanguage(browserLanguageDetector(), false);
+  }, []);
 
   function outsideClick(menu) {
     if (open !== menu) return;
@@ -180,14 +179,19 @@ export default function NavBar({
             </SearchButton>
 
             {/* // Language Picker Component */}
-            {/* <LanguageSelect
+            <LanguageSelect
               options={uniqueLangs}
               onChange={(value) => {
                 changeLanguage(value.toLowerCase(), true);
               }}
               className=""
-              selected={i18n.language.toLocaleUpperCase()}
-            /> */}
+              selected={() => {
+                if (i18n.language) {
+                  return i18n.language.toLocaleUpperCase();
+                }
+                return "EN";
+              }}
+            />
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>

@@ -0,0 +1,10 @@
+const i18nPaths = {
+    en: [
+        "/tools/cli"
+    ],
+    de: [
+        "/tools/cli"
+    ]
+};
+
+export default i18nPaths;
@@ -27,8 +27,8 @@ import NewsroomSection from '../components/newsroom/NewsroomSection'
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
-  //To be enabled in a future PR
-  //languageDetection();
+
+  languageDetection();
   return (
     <>
       <Head />