From 7eed56b36c6c38cb03fb1cd4f680170f64611a17 Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Wed, 17 Apr 2024 23:04:24 +0530
Subject: [PATCH 1/2] fixed the i18n feature

---
 components/languageSelector/LanguageSelect.js |  2 +-
 components/navigation/MobileNavMenu.js        |  3 ++-
 components/navigation/NavBar.js               | 22 +++++++++++--------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/components/languageSelector/LanguageSelect.js b/components/languageSelector/LanguageSelect.js
index 99d8a68babaf..953e369c6037 100644
--- a/components/languageSelector/LanguageSelect.js
+++ b/components/languageSelector/LanguageSelect.js
@@ -8,7 +8,7 @@ export default function LanguageSelect({
     return (
         <select data-testid="Select-form"
             onChange={(ev) => onChange(ev.target.value)}
-            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`)}
+            className={twMerge(`form-select h-full px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`)}
             value={selected}
         >
             {options.map((option, index) => (
diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
index a7f88fb4eb22..47db586c0370 100644
--- a/components/navigation/MobileNavMenu.js
+++ b/components/navigation/MobileNavMenu.js
@@ -9,7 +9,7 @@ import Link from 'next/link';
 import NavItemDropdown from '../icons/NavItemDropdown';
 import { useState } from 'react';
 
-export default function MobileNavMenu({ onClickClose = () => {} }) {
+export default function MobileNavMenu({ onClickClose = () => {}, LanguagePicker }) {
   const [open, setOpen] = useState();
   function showMenu(menu) {
     if (open === menu) {
@@ -30,6 +30,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
                 </a>
               </Link>
               <div className="flex flex-row items-center justify-content -mr-2" data-testid="MobileNav-button">
+              {LanguagePicker}
                 <SearchButton
                   className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
                   aria-label="Open Search"
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 235df1c8a8cb..84c6f51bebef 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -129,6 +129,16 @@ export default function NavBar({
     setOpen(null);
   }, [asPath]);
 
+  const LanguagePicker = (
+    <LanguageSelect
+      options={uniqueLangs}
+      onChange={(value) => {
+        changeLanguage(value.toLowerCase(), true);
+      }}
+      className=""
+      selected={i18n.language ? i18n.language.toUpperCase() : "EN"}
+    />
+  );
   return (
     <div className={`bg-white ${className} z-50`}>
       {/* <a href="#main-content" className="block md:inline-block absolute transform -translate-y-20 focus:translate-y-0 bg-gray-100 text-gray-700 p-5 text-md font-semibold" alt="Skip to main content">Skip to main content</a> */}
@@ -146,6 +156,7 @@ export default function NavBar({
         )}
 
         <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden" data-testid="Navbar-search">
+        {LanguagePicker}
           <SearchButton
             className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
             aria-label="Open Search"
@@ -207,14 +218,7 @@ export default function NavBar({
             </SearchButton>
 
             {/* // Language Picker Component */}
-            <LanguageSelect
-              options={uniqueLangs}
-              onChange={(value) => {
-                changeLanguage(value.toLowerCase(), true);
-              }}
-              className=""
-              selected={i18n.language ? i18n.language.toUpperCase() : "EN"}
-            />
+            {LanguagePicker}
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>
@@ -223,7 +227,7 @@ export default function NavBar({
       </div>
 
       {/* Mobile menu, show/hide based on mobile menu state. */}
-      {mobileMenuOpen && <MobileNavMenu onClickClose={() => setMobileMenuOpen(false)} />}
+      {mobileMenuOpen && <MobileNavMenu  onClickClose={() => setMobileMenuOpen(false)} LanguagePicker={LanguagePicker}/>}
 
     </div>
   )

From 1b0e165866c572a3fcdc64492475ae0d15528e50 Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Thu, 18 Apr 2024 15:21:50 +0530
Subject: [PATCH 2/2] changes made after review

---
 components/navigation/MobileNavMenu.js |  4 ++--
 components/navigation/NavBar.js        | 11 ++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
index 47db586c0370..770030081ccf 100644
--- a/components/navigation/MobileNavMenu.js
+++ b/components/navigation/MobileNavMenu.js
@@ -9,7 +9,7 @@ import Link from 'next/link';
 import NavItemDropdown from '../icons/NavItemDropdown';
 import { useState } from 'react';
 
-export default function MobileNavMenu({ onClickClose = () => {}, LanguagePicker }) {
+export default function MobileNavMenu({ onClickClose = () => {}, LanguageSelector }) {
   const [open, setOpen] = useState();
   function showMenu(menu) {
     if (open === menu) {
@@ -30,7 +30,7 @@ export default function MobileNavMenu({ onClickClose = () => {}, LanguagePicker
                 </a>
               </Link>
               <div className="flex flex-row items-center justify-content -mr-2" data-testid="MobileNav-button">
-              {LanguagePicker}
+              {LanguageSelector}
                 <SearchButton
                   className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
                   aria-label="Open Search"
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 84c6f51bebef..d9267b39333c 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -129,7 +129,7 @@ export default function NavBar({
     setOpen(null);
   }, [asPath]);
 
-  const LanguagePicker = (
+  const LanguageSelector = (
     <LanguageSelect
       options={uniqueLangs}
       onChange={(value) => {
@@ -156,7 +156,8 @@ export default function NavBar({
         )}
 
         <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden" data-testid="Navbar-search">
-        {LanguagePicker}
+        {/* // Language Selector for Mobile */}
+        {LanguageSelector}
           <SearchButton
             className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
             aria-label="Open Search"
@@ -217,8 +218,8 @@ export default function NavBar({
               <IconLoupe />
             </SearchButton>
 
-            {/* // Language Picker Component */}
-            {LanguagePicker}
+            {/* // Language Selector for normal screen */}
+            {LanguageSelector}
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>
@@ -227,7 +228,7 @@ export default function NavBar({
       </div>
 
       {/* Mobile menu, show/hide based on mobile menu state. */}
-      {mobileMenuOpen && <MobileNavMenu  onClickClose={() => setMobileMenuOpen(false)} LanguagePicker={LanguagePicker}/>}
+      {mobileMenuOpen && <MobileNavMenu  onClickClose={() => setMobileMenuOpen(false)} LanguageSelector={LanguageSelector}/>}
 
     </div>
   )