Merge pull request #248 from newrelic/cayla/various-search-bugs

Search ability in mobile, display no results found, no right chevron in mobile
newrelic · Jun 25, 2020 · e3223db · e3223db
2 parents 5e416d3 + 1e58808
commit e3223db
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 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,17 @@ 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 searchTerm={searchTerm} className={styles.navigation} />
+        </>
+      )}
     </header>
   );
 };

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -22,7 +22,7 @@ const filterPageNames = (pages, searchTerm, parent = []) => {
         }
       })
     ),
-  ];
+  ].filter((el) => el !== undefined);
 };
 
 const Navigation = ({ className, searchTerm }) => {
@@ -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)}

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
@@ -6,3 +6,9 @@
   list-style: none;
   padding-left: 0;
 }
+
+.emptyResults {
+  font-size: 0.875rem;
+  padding-top: 1rem;
+  font-style: italic;
+}
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -58,12 +58,17 @@ button.navLink {
 
 .currentPageIndicator {
   stroke-width: 4;
+
+  @media (max-width: 760px) {
+    display: none;
+  }
 }
 
 .nestedChevron {
   margin-right: 0.5rem;
   stroke-width: 4;
   transition: 0.2s;
+
   &.isExpanded {
     transform: rotate(90deg);
   }
@@ -88,9 +93,11 @@ button.navLink {
   ul {
     display: block;
   }
+
   .nestedChevron {
     transform: rotate(90deg);
   }
+
   .groupName {
     margin-top: 0.5rem;
   }