From db6443b427b0ccefb1bac45d2e34c9721809303a Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Tue, 16 Jun 2020 17:04:56 -0700
Subject: [PATCH] feat: Hide sidenav for small widths

---
 src/components/GlobalHeader.module.scss |  2 +-
 src/components/Layout.js                |  2 +-
 src/components/Layout.module.scss       | 18 ++++++++++++++++++
 src/components/Sidebar.js               |  9 ++-------
 src/components/Sidebar.module.scss      | 16 ----------------
 5 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
index 666bcc10b..5978ba7e3 100644
--- a/src/components/GlobalHeader.module.scss
+++ b/src/components/GlobalHeader.module.scss
@@ -124,7 +124,7 @@
 
 @media screen and (max-width: 1240px) {
   .global-header-container {
-    padding: 0 28px;
+    padding: 0 1rem;
   }
 }
 
diff --git a/src/components/Layout.js b/src/components/Layout.js
index dbe9784cf..857496e05 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -12,7 +12,7 @@ const Layout = ({ children }) => (
   <>
     <GlobalHeader />
     <div className={styles.layout}>
-      <Sidebar pages={pages} />
+      <Sidebar className={styles.sidebar} pages={pages} />
       <main>{children}</main>
     </div>
     <Footer />
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index a951221fb..ee84aaee6 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -5,4 +5,22 @@
   grid-gap: 1rem;
   max-width: 1200px;
   margin: 0 auto;
+  padding-top: 1rem;
+}
+
+@media (max-width: 760px) {
+  .layout {
+    display: block;
+  }
+
+  .sidebar {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1240px) {
+  .layout {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 }
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index a8e8b7353..dd1f4a5cf 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -49,8 +49,8 @@ const renderNav = (pages, depthLevel = 0) => {
   });
 };
 
-const Sidebar = ({ className, pages, isOpen }) => (
-  <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
+const Sidebar = ({ className, pages }) => (
+  <aside className={cx(styles.sidebar, className)}>
     <Link to="/" className={styles.logo} />
     <nav role="navigation" aria-label="Sidebar">
       <ul className={styles.listNav}>{renderNav(pages)}</ul>
@@ -61,11 +61,6 @@ const Sidebar = ({ className, pages, isOpen }) => (
 Sidebar.propTypes = {
   className: PropTypes.string,
   pages: PropTypes.arrayOf(link).isRequired,
-  isOpen: PropTypes.bool,
-};
-
-Sidebar.defaultProps = {
-  isOpen: false,
 };
 
 export default Sidebar;
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 7a897b912..61aa37390 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -23,26 +23,10 @@
     cursor: pointer;
     width: 3rem;
     display: none;
-
-    @media (max-width: 760px) {
-      display: block;
-    }
   }
 
   nav {
     margin-top: 1rem;
-
-    @media (max-width: 760px) {
-      display: none;
-    }
-  }
-
-  &.isOpen {
-    nav {
-      @media (max-width: 760px) {
-        display: block;
-      }
-    }
   }
 }