feat: Hide sidenav for small widths

src/components/GlobalHeader.module.scss

@@ -124,7 +124,7 @@
 
 @media screen and (max-width: 1240px) {
   .global-header-container {
-    padding: 0 28px;
+    padding: 0 1rem;
   }
 }
 

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 />

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;
+  }
 }

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;

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;
-      }
-    }
   }
 }