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 01/11] 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;

From 5e450f7df339a91ac4dab7f55ac02374fed97639 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 11:42:59 -0400
Subject: [PATCH 02/11] fix: add padding

---
 src/components/Navigation.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index c36866bdb..b82fb3955 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -9,4 +9,5 @@
 
 .emptyResults {
   font-size: 0.875rem;
+  padding-top: 1rem;
 }

From 63eca33932e9df78e975c99a256fb6af85990edf Mon Sep 17 00:00:00 2001
From: Cayla Hamann <38332422+caylahamann@users.noreply.github.com>
Date: Thu, 25 Jun 2020 12:21:29 -0400
Subject: [PATCH 03/11] Update src/components/Navigation.js

Co-authored-by: Zack Stickles <zstickles@gmail.com>
---
 src/components/Navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index c809857cf..db615f8e0 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -36,7 +36,7 @@ const Navigation = ({ className, searchTerm, mobile }) => {
     : undefined;
 
   if (filteredPageNames?.length === 0) {
-    return <div className={styles.emptyResults}>No results found.</div>;
+    return <div className={styles.emptyResults}>No results found</div>;
   }
 
   return (

From 0933aba37b853c099d99cf42719653965ef655a7 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 12:27:07 -0400
Subject: [PATCH 04/11] fix: refactored and removed mobile prop

---
 src/components/MobileHeader.js             |  6 +-----
 src/components/Navigation.js               |  3 +--
 src/components/NavigationItems.js          | 17 +++--------------
 src/components/NavigationItems.module.scss |  3 +++
 4 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index c0c98b001..07d6746fd 100644
--- a/src/components/MobileHeader.js
+++ b/src/components/MobileHeader.js
@@ -33,11 +33,7 @@ const MobileHeader = ({ className, isOpen, toggle }) => {
             onChange={(e) => setSearchTerm(e.target.value)}
             value={searchTerm}
           />
-          <Navigation
-            mobile
-            searchTerm={searchTerm}
-            className={styles.navigation}
-          />
+          <Navigation searchTerm={searchTerm} className={styles.navigation} />
         </>
       )}
     </header>
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index db615f8e0..ac096eac4 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -25,7 +25,7 @@ const filterPageNames = (pages, searchTerm, parent = []) => {
   ].filter((el) => el !== undefined);
 };
 
-const Navigation = ({ className, searchTerm, mobile }) => {
+const Navigation = ({ className, searchTerm }) => {
   const searchTermSanitized = searchTerm?.replace(
     /[.*+?^${}()|[\]\\]/g,
     '\\$&'
@@ -50,7 +50,6 @@ const Navigation = ({ className, searchTerm, mobile }) => {
           searchTerm={searchTermSanitized}
           pages={pages}
           filteredPageNames={filteredPageNames}
-          mobile={mobile}
         />
       </ul>
     </nav>
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 57fbd6717..ae5cb1323 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -24,7 +24,6 @@ const NavigationItems = ({
   filteredPageNames,
   searchTerm,
   depthLevel = 0,
-  mobile,
 }) => {
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -53,7 +52,6 @@ const NavigationItems = ({
             searchTerm={searchTerm}
             filteredPageNames={filteredPageNames}
             key={index}
-            mobile={mobile}
           />
         ))}
       </Fragment>
@@ -61,13 +59,7 @@ const NavigationItems = ({
   });
 };
 
-const NavItem = ({
-  page,
-  depthLevel,
-  searchTerm,
-  filteredPageNames,
-  mobile,
-}) => {
+const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
 
@@ -116,7 +108,7 @@ const NavItem = ({
             {headerIcon}
             {display}
           </span>
-          {!mobile && isCurrentPage && (
+          {isCurrentPage && (
             <FeatherIcon
               className={styles.currentPageIndicator}
               name="chevron-right"
@@ -131,7 +123,7 @@ const NavItem = ({
           onKeyPress={() => setIsExpanded(!isExpanded)}
           tabIndex={0}
         >
-          {!mobile && depthLevel > 0 && (
+          {depthLevel > 0 && (
             <FeatherIcon
               className={cx(
                 { [styles.isExpanded]: isExpanded },
@@ -155,7 +147,6 @@ const NavItem = ({
             filteredPageNames={filteredPageNames}
             depthLevel={depthLevel + 1}
             searchTerm={searchTerm}
-            mobile={mobile}
           />
         </ul>
       )}
@@ -168,7 +159,6 @@ NavigationItems.propTypes = {
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,
-  mobile: PropTypes.bool,
 };
 
 NavItem.propTypes = {
@@ -176,7 +166,6 @@ NavItem.propTypes = {
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number.isRequired,
-  mobile: PropTypes.bool,
 };
 
 export default NavigationItems;
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index 516dfb096..b26a1b3a3 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -53,6 +53,9 @@ button.navLink {
 
 .currentPageIndicator {
   stroke-width: 4;
+  @media (min-width: 760px + 1) {
+    display: none;
+  }
 }
 
 .nestedChevron {

From a9a97c9f7e0cd579278d8f38ccfc9a3768ccde74 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 12:27:49 -0400
Subject: [PATCH 05/11] fix: remove proptype

---
 src/components/Navigation.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index ac096eac4..b1ee99d2e 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -59,7 +59,6 @@ const Navigation = ({ className, searchTerm }) => {
 Navigation.propTypes = {
   className: PropTypes.string,
   searchTerm: PropTypes.string,
-  mobile: PropTypes.bool,
 };
 
 export default Navigation;

From 3732dfae50952e0a80a36dfbd0bff186e871cceb Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 15:06:52 -0400
Subject: [PATCH 06/11] fix: add italics to class

---
 src/components/Navigation.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index b82fb3955..2bb3a0cb3 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -10,4 +10,5 @@
 .emptyResults {
   font-size: 0.875rem;
   padding-top: 1rem;
+  font-style: italic;
 }

From 69e8591307dc2406fb76ae2b3a594f5a80cd216b Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 15:18:52 -0400
Subject: [PATCH 07/11] dummy commit to retrigger build

---
 src/components/Navigation.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 2bb3a0cb3..b82fb3955 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -10,5 +10,4 @@
 .emptyResults {
   font-size: 0.875rem;
   padding-top: 1rem;
-  font-style: italic;
 }

From 00128e77846e47f5ca7753c25187e84187d4f274 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 15:19:09 -0400
Subject: [PATCH 08/11] dummy commit to retrigger build

---
 src/components/Navigation.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index b82fb3955..2bb3a0cb3 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -10,4 +10,5 @@
 .emptyResults {
   font-size: 0.875rem;
   padding-top: 1rem;
+  font-style: italic;
 }

From 465164724a06d6a28bb3a782780031ee5a163722 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 15:26:14 -0400
Subject: [PATCH 09/11] dummy commit to trigger build

---
 src/components/Navigation.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 2bb3a0cb3..3fb896861 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -10,5 +10,6 @@
 .emptyResults {
   font-size: 0.875rem;
   padding-top: 1rem;
+
   font-style: italic;
 }

From e7fda7fcde7e6792afe4e25c388320e1dd1353a7 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Thu, 25 Jun 2020 15:48:04 -0400
Subject: [PATCH 10/11] fix: removed spacing

---
 src/components/Navigation.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 3fb896861..2bb3a0cb3 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -10,6 +10,5 @@
 .emptyResults {
   font-size: 0.875rem;
   padding-top: 1rem;
-
   font-style: italic;
 }

From 1e58808b9bdbc3a0cfac5beb7856a2f6c2c15342 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Thu, 25 Jun 2020 15:52:54 -0700
Subject: [PATCH 11/11] chore: fixing media query

---
 src/components/NavigationItems.module.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index 08a3d9a23..6ebd0dc5f 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -58,7 +58,8 @@ button.navLink {
 
 .currentPageIndicator {
   stroke-width: 4;
-  @media (min-width: 760px + 1) {
+
+  @media (max-width: 760px) {
     display: none;
   }
 }
@@ -67,6 +68,7 @@ button.navLink {
   margin-right: 0.5rem;
   stroke-width: 4;
   transition: 0.2s;
+
   &.isExpanded {
     transform: rotate(90deg);
   }
@@ -91,9 +93,11 @@ button.navLink {
   ul {
     display: block;
   }
+
   .nestedChevron {
     transform: rotate(90deg);
   }
+
   .groupName {
     margin-top: 0.5rem;
   }