refactor(v2): show search icon only on mobiles

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;
   }

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>
   );
 };

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;
+  }
+}