From eee13c5852a904661beefae9f7a99087f03cdaf0 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Thu, 30 Apr 2020 18:06:13 +0200
Subject: [PATCH 1/4] [SearchBar] Show icon-only for small devices

Show icon-only search bar for devices under 768px.
This fix is usefull to solve an issue with long app name causing a rendering problem with search
---
 .../docusaurus-theme-classic/src/theme/Navbar/styles.module.css | 2 +-
 .../src/theme/SearchBar/styles.css                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
index 7d59c599a1e0..4131d79abe89 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
@@ -11,7 +11,7 @@
   }
 }
 
-@media (max-width: 360px) {
+@media only screen and (max-width: 768px) {
   .hideLogoText {
     display: none;
   }
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index f9053f584510..84d53576bc16 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -21,7 +21,7 @@
   visibility: hidden;
 }
 
-@media (max-width: 360px) {
+@media only screen and (max-width: 768px) {
   .search-bar {
     width: 0 !important;
     background: none !important;

From dcce9ef274b963ebb33607bfbec48ab53ce729ec Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Wed, 13 May 2020 18:08:31 +0200
Subject: [PATCH 2/4] [SearchBar] update css color and radius

---
 .../src/theme/SearchBar/styles.css                        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index 84d53576bc16..123b4a01ab0a 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -34,7 +34,11 @@
   }
 
   .search-icon {
-    display: inline;
-    vertical-align: sub;
+    background-color: var(--ifm-navbar-search-input-background-color);
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    display: inline-block;
+    vertical-align: middle;
   }
 }

From 7cef88308616d12d7fac3b5a1acd3b0f5aa9c996 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Wed, 13 May 2020 18:32:22 +0200
Subject: [PATCH 3/4] [SearchBar] make search icon similar to input

---
 .../src/theme/SearchBar/styles.css                         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index 123b4a01ab0a..1a09b9a9a58e 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -35,10 +35,11 @@
 
   .search-icon {
     background-color: var(--ifm-navbar-search-input-background-color);
-    width: 30px;
-    height: 30px;
-    border-radius: 15px;
+    padding: 0 0.5rem 0 2.25rem;
+    line-height: 2rem;
+    border-radius: 2rem;
     display: inline-block;
+    height: 32px;
     vertical-align: middle;
   }
 }

From 72f936b4c181f4ca801b0a72a9c704b739176714 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Mon, 18 May 2020 12:06:53 +0200
Subject: [PATCH 4/4] removed search-icon and enable click on wrapper div

---
 .../src/theme/SearchBar/index.js              | 26 +++++++--------
 .../src/theme/SearchBar/styles.css            | 32 ++-----------------
 2 files changed, 14 insertions(+), 44 deletions(-)

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
index 6815d4ddca55..cbca9652a536 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -67,9 +67,11 @@ const Search = (props) => {
     );
   };
 
-  const handleSearchIcon = useCallback(() => {
+  const expandInput = useCallback(() => {
     loadAlgolia();
-
+    if (props.isSearchBarExpanded) {
+      return;
+    }
     if (algoliaLoaded) {
       searchBarRef.current.focus();
     }
@@ -78,7 +80,7 @@ const Search = (props) => {
   }, [props.isSearchBarExpanded]);
 
   const handleSearchInputBlur = useCallback(() => {
-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
+    props.handleSearchBarToggle(false);
   }, [props.isSearchBarExpanded]);
 
   const handleSearchInput = useCallback((e) => {
@@ -88,17 +90,13 @@ const Search = (props) => {
   });
 
   return (
-    <div className="navbar__search" key="search-box">
-      <span
-        aria-label="expand searchbar"
-        role="button"
-        className={classnames('search-icon', {
-          'search-icon-hidden': props.isSearchBarExpanded,
-        })}
-        onClick={handleSearchIcon}
-        onKeyDown={handleSearchIcon}
-        tabIndex={0}
-      />
+    <div
+      role="button"
+      tabIndex={0}
+      className="navbar__search"
+      key="search-box"
+      onClick={expandInput}
+      onKeyDown={expandInput}>
       <input
         id="search_input_react"
         type="search"
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index 1a09b9a9a58e..77e0b7a8b9e4 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -5,41 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.search-icon {
-  background-image: var(--ifm-navbar-search-input-icon);
-  height: auto;
-  width: 24px;
-  cursor: pointer;
-  padding: 8px;
-  line-height: 32px;
-  background-repeat: no-repeat;
-  background-position: center;
-  display: none;
-}
-
-.search-icon-hidden {
-  visibility: hidden;
-}
-
 @media only screen and (max-width: 768px) {
   .search-bar {
     width: 0 !important;
-    background: none !important;
-    padding: 0 !important;
-    transition: none !important;
+    cursor: pointer !important;
   }
 
   .search-bar-expanded {
-    width: 9rem !important;
-  }
-
-  .search-icon {
-    background-color: var(--ifm-navbar-search-input-background-color);
-    padding: 0 0.5rem 0 2.25rem;
-    line-height: 2rem;
-    border-radius: 2rem;
-    display: inline-block;
-    height: 32px;
-    vertical-align: middle;
+    width: 13rem !important;
   }
 }