From 117e2a22afea50de1c4d456573681aa49bcd4b59 Mon Sep 17 00:00:00 2001
From: jyotishpro <kumarjyotish67303@gmail.com>
Date: Sat, 16 Nov 2024 12:14:25 +0530
Subject: [PATCH 1/3] fix visibily issue #3371 with algolia search icon in
 navbar

---
 components/navigation/NavBar.tsx | 37 +++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx
index d0fd2ca6fa02..6eebcfd33114 100644
--- a/components/navigation/NavBar.tsx
+++ b/components/navigation/NavBar.tsx
@@ -40,6 +40,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
   const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
   const { i18n } = useTranslation();
 
+  
   /**
    * Retrieves unique language options based on the current path and i18nPaths configuration.
    *
@@ -145,6 +146,23 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
     setOpen(null);
   }, [asPath]);
 
+  const loupeSvg = encodeURIComponent(`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m19 19-3.5-3.5" />
+      <circle cx="11" cy="11" r="6" />
+    </svg>
+  `);
+
   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'>
@@ -160,7 +178,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
 
         <div className='-my-2 -mr-2 flex flex-row items-center justify-center lg:hidden' data-testid='Navbar-search'>
           <SearchButton
-            className='flex items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
+            className='flex  items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
             aria-label='Open Search'
           >
             <IconLoupe />
@@ -219,11 +237,21 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
           ))}
 
           <div className='justify-content flex flex-row items-center'>
+          
             <SearchButton
-              className='mr-2 flex items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
-              aria-label='Open Search'
+              className="mr-2 p-3 flex items-center space-x-2 rounded-md opacity-40 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
+              aria-label="Open Search"
+              style={{
+                backgroundImage: `url("data:image/svg+xml;charset=utf-8,${loupeSvg}")`,
+                backgroundSize: '1.5rem',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center left',
+              }}
             >
-              <IconLoupe />
+              
+
+              <IconLoupe/>
+              
             </SearchButton>
 
             {/* // Language Picker Component */}
@@ -235,7 +263,6 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
               className=''
               selected={i18n.language ? i18n.language.toUpperCase() : 'EN'}
             />
-
             <GithubButton
               text='Star on GitHub'
               href='https://github.com/asyncapi/spec'

From 28fed46deed456ac573bec0a7e2d41323e163eec Mon Sep 17 00:00:00 2001
From: jyotishpro <kumarjyotish67303@gmail.com>
Date: Sat, 16 Nov 2024 20:12:49 +0530
Subject: [PATCH 2/3] Fixes algolia search button

---
 components/navigation/NavBar.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx
index 6eebcfd33114..4b74e728f754 100644
--- a/components/navigation/NavBar.tsx
+++ b/components/navigation/NavBar.tsx
@@ -152,7 +152,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
       width="24"
       height="24"
       fill="none"
-      stroke="currentColor"
+      stroke="#9CA3AF"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -239,7 +239,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
           <div className='justify-content flex flex-row items-center'>
           
             <SearchButton
-              className="mr-2 p-3 flex items-center space-x-2 rounded-md opacity-40 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
+              className="mr-2 p-3 flex items-center space-x-2 rounded-md text-left  text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
               aria-label="Open Search"
               style={{
                 backgroundImage: `url("data:image/svg+xml;charset=utf-8,${loupeSvg}")`,
@@ -247,11 +247,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
                 backgroundRepeat: 'no-repeat',
                 backgroundPosition: 'center left',
               }}
-            >
-              
-
-              <IconLoupe/>
-              
+            >     
             </SearchButton>
 
             {/* // Language Picker Component */}

From 2cadadfa06694b3fb08aeda003d324cf8e6abc43 Mon Sep 17 00:00:00 2001
From: jyotishpro <kumarjyotish67303@gmail.com>
Date: Sat, 16 Nov 2024 20:30:25 +0530
Subject: [PATCH 3/3] fixes #3371 algolia search button for mobile

---
 components/navigation/MobileNavMenu.tsx | 27 +++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx
index 8b0ccd740374..61c8b7b3cc6f 100644
--- a/components/navigation/MobileNavMenu.tsx
+++ b/components/navigation/MobileNavMenu.tsx
@@ -41,6 +41,23 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu
     setOpen(menu);
   }
 
+  const loupeSvg = encodeURIComponent(`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      stroke="#9CA3AF"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m19 19-3.5-3.5" />
+      <circle cx="11" cy="11" r="6" />
+    </svg>
+  `);
+
   return (
     <div className='fixed inset-x-0 top-0 z-60 max-h-full origin-top-right overflow-y-auto py-2 transition lg:hidden'>
       <div className='rounded-lg shadow-lg'>
@@ -52,10 +69,16 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu
               </Link>
               <div className='justify-content -mr-2 flex flex-row items-center' data-testid='MobileNav-button'>
                 <SearchButton
-                  className='flex items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
+                  className='flex items-center space-x-2 rounded-md p-4 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
                   aria-label='Open Search'
+                  style={{
+                    backgroundImage: `url("data:image/svg+xml;charset=utf-8,${loupeSvg}")`,
+                    backgroundSize: '1.5rem',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center left',
+                  }}
                 >
-                  <SearchIcon />
+                  
                 </SearchButton>
                 <button
                   onClick={onClickClose}