From 2499de7452095c08eda7766881a7bd2293b01161 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Fri, 22 May 2020 18:14:40 +0300
Subject: [PATCH] refactor(v2): show only search icon on mobiles

---
 .../src/theme/Navbar/styles.module.css        |  2 +-
 .../src/theme/SearchBar/index.js              | 67 ++++++++++---------
 .../src/theme/SearchBar/styles.css            | 40 -----------
 .../src/theme/SearchBar/styles.module.css     | 62 +++++++++++++++++
 4 files changed, 97 insertions(+), 74 deletions(-)
 delete mode 100644 packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
 create mode 100644 packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css

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..fb524ac417ff 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 (max-width: 768px) {
   .hideLogoText {
     display: none;
   }
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 90abee077851..743ea73a74d2 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -12,9 +12,9 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useHistory} from '@docusaurus/router';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
 
-import './styles.css';
+import styles from './styles.module.css';
 
-const Search = (props) => {
+const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
   const [algoliaLoaded, setAlgoliaLoaded] = useState(false);
   const searchBarRef = useRef(null);
   const {siteConfig = {}} = useDocusaurusContext();
@@ -76,19 +76,19 @@ const Search = (props) => {
     );
   };
 
-  const handleSearchIcon = useCallback(() => {
+  const toggleSearchInput = useCallback(() => {
     loadAlgolia();
 
     if (algoliaLoaded) {
       searchBarRef.current.focus();
     }
 
-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
-  }, [props.isSearchBarExpanded]);
+    handleSearchBarToggle(!isSearchBarExpanded);
+  }, [isSearchBarExpanded]);
 
   const handleSearchInputBlur = useCallback(() => {
-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
-  }, [props.isSearchBarExpanded]);
+    handleSearchBarToggle(!isSearchBarExpanded);
+  }, [isSearchBarExpanded]);
 
   const handleSearchInput = useCallback((e) => {
     const needFocus = e.type !== 'mouseover';
@@ -104,32 +104,33 @@ 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}
-      />
-      <input
-        id="search_input_react"
-        type="search"
-        placeholder="Search"
-        aria-label="Search"
-        className={classnames(
-          'navbar__search-input',
-          {'search-bar-expanded': props.isSearchBarExpanded},
-          {'search-bar': !props.isSearchBarExpanded},
-        )}
-        onMouseOver={handleSearchInput}
-        onFocus={handleSearchInput}
-        onBlur={handleSearchInputBlur}
-        onKeyDown={handleSearchInputPressEnter}
-        ref={searchBarRef}
-      />
+      <div className={styles.searchWrapper}>
+        <span
+          aria-label="expand searchbar"
+          role="button"
+          className={classnames(styles.searchIconButton, {
+            [styles.searchIconButtonHidden]: isSearchBarExpanded,
+          })}
+          onClick={toggleSearchInput}
+          onKeyDown={toggleSearchInput}
+          tabIndex={0}
+        />
+
+        <input
+          id="search_input_react"
+          type="search"
+          placeholder="Search"
+          aria-label="Search"
+          className={classnames('navbar__search-input', styles.searchInput, {
+            [styles.searchInputExpanded]: isSearchBarExpanded,
+          })}
+          onMouseOver={handleSearchInput}
+          onFocus={handleSearchInput}
+          onBlur={handleSearchInputBlur}
+          onKeyDown={handleSearchInputPressEnter}
+          ref={searchBarRef}
+        />
+      </div>
     </div>
   );
 };
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
deleted file mode 100644
index f9053f584510..000000000000
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * 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 (max-width: 360px) {
-  .search-bar {
-    width: 0 !important;
-    background: none !important;
-    padding: 0 !important;
-    transition: none !important;
-  }
-
-  .search-bar-expanded {
-    width: 9rem !important;
-  }
-
-  .search-icon {
-    display: inline;
-    vertical-align: sub;
-  }
-}
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
new file mode 100644
index 000000000000..780f618f77da
--- /dev/null
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.searchIconButton {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .searchIconButton {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 2.75rem;
+    height: 2rem;
+    z-index: 1;
+  }
+
+  .searchIconButtonHidden {
+    visibility: hidden;
+  }
+
+  :global(.navbar__items:first-of-type) {
+    flex: 0 1 auto;
+  }
+
+  :global(.navbar__inner) {
+    position: relative;
+  }
+
+  :global(.navbar__search) {
+    position: relative;
+    flex: 1 1 auto;
+    padding-left: 0;
+  }
+
+  .searchWrapper {
+    position: absolute;
+    top: calc(var(--ifm-navbar-padding-vertical) * 2 * -1);
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .searchInput {
+    width: 0;
+    transition: width 0.3s ease-in-out;
+  }
+
+  .searchInputExpanded {
+    width: 100%;
+  }
+
+  :global(.algolia-autocomplete) {
+    width: 100%;
+    display: flex !important;
+    justify-content: flex-end;
+  }
+}