fix: search ability in mobile, no results found, right chevron

newrelic · Jun 25, 2020 · cb683ac · cb683ac
1 parent 6621851
commit cb683ac
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
 import Logo from './Logo';
 import Navigation from './Navigation';
 import HamburgerMenu from './HamburgerMenu';
+import SearchInput from './SearchInput';
 import styles from './MobileHeader.module.scss';
 
 const MobileHeader = ({ className, isOpen, toggle }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
   return (
     <header className={cx(styles.container, className)}>
       <div className={styles.menuBar}>
@@ -22,7 +25,21 @@ const MobileHeader = ({ className, isOpen, toggle }) => {
         />
       </div>
 
-      {isOpen && <Navigation className={styles.navigation} />}
+      {isOpen && (
+        <>
+          <SearchInput
+            className={styles.searchInput}
+            placeholder="Search developer docs"
+            onChange={(e) => setSearchTerm(e.target.value)}
+            value={searchTerm}
+          />
+          <Navigation
+            mobile
+            searchTerm={searchTerm}
+            className={styles.navigation}
+          />
+        </>
+      )}
     </header>
   );
 };

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -22,10 +22,10 @@ const filterPageNames = (pages, searchTerm, parent = []) => {
         }
       })
     ),
-  ];
+  ].filter((el) => el !== undefined);
 };
 
-const Navigation = ({ className, searchTerm }) => {
+const Navigation = ({ className, searchTerm, mobile }) => {
   const searchTermSanitized = searchTerm?.replace(
     /[.*+?^${}()|[\]\\]/g,
     '\\$&'
@@ -35,6 +35,10 @@ const Navigation = ({ className, searchTerm }) => {
     ? filterPageNames(pages, searchTermSanitized)
     : undefined;
 
+  if (filteredPageNames?.length === 0) {
+    return <div className={styles.emptyResults}>No results found.</div>;
+  }
+
   return (
     <nav
       className={cx(styles.container, className)}
@@ -46,6 +50,7 @@ const Navigation = ({ className, searchTerm }) => {
           searchTerm={searchTermSanitized}
           pages={pages}
           filteredPageNames={filteredPageNames}
+          mobile={mobile}
         />
       </ul>
     </nav>
@@ -55,6 +60,7 @@ const Navigation = ({ className, searchTerm }) => {
 Navigation.propTypes = {
   className: PropTypes.string,
   searchTerm: PropTypes.string,
+  mobile: PropTypes.bool,
 };
 
 export default Navigation;
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
@@ -6,3 +6,7 @@
   list-style: none;
   padding-left: 0;
 }
+
+.emptyResults {
+  font-size: 0.875rem;
+}
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -24,6 +24,7 @@ const NavigationItems = ({
   filteredPageNames,
   searchTerm,
   depthLevel = 0,
+  mobile,
 }) => {
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -52,14 +53,21 @@ const NavigationItems = ({
             searchTerm={searchTerm}
             filteredPageNames={filteredPageNames}
             key={index}
+            mobile={mobile}
           />
         ))}
       </Fragment>
     );
   });
 };
 
-const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
+const NavItem = ({
+  page,
+  depthLevel,
+  searchTerm,
+  filteredPageNames,
+  mobile,
+}) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
 
@@ -108,7 +116,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
             {headerIcon}
             {display}
           </span>
-          {isCurrentPage && (
+          {!mobile && isCurrentPage && (
             <FeatherIcon
               className={styles.currentPageIndicator}
               name="chevron-right"
@@ -123,7 +131,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
           onKeyPress={() => setIsExpanded(!isExpanded)}
           tabIndex={0}
         >
-          {depthLevel > 0 && (
+          {!mobile && depthLevel > 0 && (
             <FeatherIcon
               className={cx(
                 { [styles.isExpanded]: isExpanded },
@@ -147,6 +155,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
             filteredPageNames={filteredPageNames}
             depthLevel={depthLevel + 1}
             searchTerm={searchTerm}
+            mobile={mobile}
           />
         </ul>
       )}
@@ -159,13 +168,15 @@ NavigationItems.propTypes = {
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,
+  mobile: PropTypes.bool,
 };
 
 NavItem.propTypes = {
   page: link,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number.isRequired,
+  mobile: PropTypes.bool,
 };
 
 export default NavigationItems;