Merge pull request #563 from newrelic/jerel/tighten-nav

Navigation improvements
newrelic · Aug 11, 2020 · 25be620 · 25be620
2 parents e502f61 + 04f402d
commit 25be620
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 264 deletions.
diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js
diff --git a/src/components/HamburgerMenu.module.scss b/src/components/HamburgerMenu.module.scss
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
@@ -1,43 +1,64 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
 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';
+import { HamburgerMenu, SearchInput } from '@newrelic/gatsby-theme-newrelic';
 
 const MobileHeader = ({ className, isOpen, toggle }) => {
   const [searchTerm, setSearchTerm] = useState('');
 
   return (
     <header
       data-swiftype-index={false}
-      className={cx(styles.container, className)}
+      className={className}
+      css={css`
+        position: relative;
+        padding: 0 2rem;
+
+        width: 100vw;
+      `}
     >
-      <div className={styles.menuBar}>
+      <div
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: var(--height-mobile-nav-bar);
+        `}
+      >
         <Link to="/">
-          <Logo className={styles.logo} />
+          <Logo
+            css={css`
+              display: block;
+              width: 150px;
+            `}
+          />
         </Link>
 
-        <HamburgerMenu
-          className={styles.hamburgerMenu}
-          toggle={toggle}
-          isOpen={isOpen}
-        />
+        <HamburgerMenu onToggle={toggle} isOpen={isOpen} />
       </div>
 
       {isOpen && (
         <>
           <SearchInput
-            className={styles.searchInput}
             placeholder="Search developer docs"
             onClear={() => setSearchTerm('')}
             onChange={(e) => setSearchTerm(e.target.value)}
             value={searchTerm}
           />
-          <Navigation searchTerm={searchTerm} className={styles.navigation} />
+          <Navigation
+            searchTerm={searchTerm}
+            css={css`
+              font-size: 1rem;
+              padding: 1.5rem 0rem;
+              height: calc(
+                100vh -
+                  (var(--height-mobile-nav-bar) + var(--height-global-header))
+              );
+            `}
+          />
         </>
       )}
     </header>

diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -45,13 +45,11 @@ const Navigation = ({ className, searchTerm }) => {
       role="navigation"
       aria-label="Navigation"
     >
-      <ul className={styles.listNav}>
-        <NavigationItems
-          searchTerm={searchTermSanitized}
-          pages={pages}
-          filteredPageNames={filteredPageNames}
-        />
-      </ul>
+      <NavigationItems
+        searchTerm={searchTermSanitized}
+        pages={pages}
+        filteredPageNames={filteredPageNames}
+      />
     </nav>
   );
 };

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
@@ -2,11 +2,6 @@
   font-size: 0.875rem;
 }
 
-.listNav {
-  list-style: none;
-  padding-left: 0;
-}
-
 .emptyResults {
   font-size: 0.875rem;
   padding-top: 1rem;