From cb683accd3bddff3e2b442012953284ab8da85cf Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 11:23:05 -0400
Subject: [PATCH] fix: search ability in mobile, no results found, right
 chevron

---
 src/components/MobileHeader.js        | 21 +++++++++++++++++++--
 src/components/Navigation.js          | 10 ++++++++--
 src/components/Navigation.module.scss |  4 ++++
 src/components/NavigationItems.js     | 17 ++++++++++++++---
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index 7e781005a..c0c98b001 100644
--- 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
index 0c1c63fec..c809857cf 100644
--- 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
index 57428ada2..c36866bdb 100644
--- 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
index ae5cb1323..57fbd6717 100644
--- 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,6 +53,7 @@ const NavigationItems = ({
             searchTerm={searchTerm}
             filteredPageNames={filteredPageNames}
             key={index}
+            mobile={mobile}
           />
         ))}
       </Fragment>
@@ -59,7 +61,13 @@ const NavigationItems = ({
   });
 };
 
-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,6 +168,7 @@ NavigationItems.propTypes = {
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,
+  mobile: PropTypes.bool,
 };
 
 NavItem.propTypes = {
@@ -166,6 +176,7 @@ NavItem.propTypes = {
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number.isRequired,
+  mobile: PropTypes.bool,
 };
 
 export default NavigationItems;