Merge pull request #167 from newrelic/tglaser/mobile-nav-tweaks

styles: Mobile nav improvments
newrelic · Jun 17, 2020 · 81ba13f · 81ba13f
2 parents 30e7b6c + ed89019
commit 81ba13f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -5,9 +5,10 @@ import ExternalLink from './ExternalLink';
 import styles from './Footer.module.scss';
 import FeatherIcon from './FeatherIcon';
 import Logo from './Logo';
+import PropTypes from 'prop-types';
 
-const Footer = () => (
-  <footer className={styles.footer}>
+const Footer = ({ className }) => (
+  <footer className={cx(styles.footer, className)}>
     <div className={cx('site-container', styles.container)}>
       <div className={styles.left}>
         <Link to="/">
@@ -36,4 +37,8 @@ const Footer = () => (
   </footer>
 );
 
+Footer.propTypes = {
+  className: PropTypes.string,
+};
+
 export default Footer;
diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
@@ -82,13 +82,3 @@
   display: flex;
   align-items: center;
 }
-
-// ==============================================================
-// Responsive styles
-// ==============================================================
-
-@media screen and (max-width: 1240px) {
-  .globalHeaderContainer {
-    padding: 0 1.75rem;
-  }
-}
diff --git a/src/components/HamburgerMenu.module.scss b/src/components/HamburgerMenu.module.scss
@@ -3,8 +3,9 @@ button.hamburgerMenu {
   background: none;
   border: 0;
   cursor: pointer;
-  width: 4rem;
+  width: 2rem;
   outline: none;
+  padding: 0;
 
   div {
     width: 100%;

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -30,7 +30,11 @@ const Layout = ({ children }) => {
           {children}
         </main>
       </div>
-      <Footer />
+      <Footer
+        className={cx({
+          [styles.hideOnMobile]: isMobileNavOpen,
+        })}
+      />
     </div>
   );
 };

diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
@@ -1,14 +1,14 @@
 .container {
   position: relative;
   border-bottom: 1px solid var(--color-neutrals-100);
+  padding: 0 2rem;
 }
 
 .menuBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: var(--height-mobile-nav-bar);
-  padding: 0 1rem;
 }
 
 .logo {