From 6d7253b8416408544a0813e1acb4cb72fcdac270 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Mon, 27 Apr 2020 12:12:36 -0700
Subject: [PATCH] feat: mobile menu

---
 src/components/Sidebar.js    | 23 +++++++++++++++++---
 src/components/Sidebar.scss  | 42 +++++++++++++++++++++++++++++++-----
 src/pages/reference.js       | 30 ++++++++++++++++----------
 src/templates/Reference.scss |  8 +++++++
 4 files changed, 84 insertions(+), 19 deletions(-)

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 557bce74c..d52064b60 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -16,9 +16,20 @@ const renderNav = (page, index) => (
   </li>
 );
 
-const Sidebar = ({ pages }) => (
-  <aside className="Sidebar">
-    <h3>Pages</h3>
+const Sidebar = ({ pages, isOpen, toggle }) => (
+  <aside className={cx('Sidebar', { 'is-open': isOpen })}>
+    <div className="Sidebar-top">
+      <h3>Pages</h3>
+      <button
+        aria-expanded={isOpen}
+        className="Sidebar-toggle"
+        aria-label="Main Menu Toggle"
+        type="button"
+        onClick={() => toggle()}
+      >
+        {isOpen ? 'close' : 'open'}
+      </button>
+    </div>
     <nav role="navigation" aria-label="Sidebar">
       <ul>{pages.map(renderNav)}</ul>
     </nav>
@@ -26,7 +37,13 @@ const Sidebar = ({ pages }) => (
 );
 
 Sidebar.propTypes = {
+  toggle: PropTypes.func.isRequired,
   pages: PropTypes.arrayOf(link),
+  isOpen: PropTypes.bool,
+};
+
+Sidebar.defaultProps = {
+  isOpen: false,
 };
 
 export default Sidebar;
diff --git a/src/components/Sidebar.scss b/src/components/Sidebar.scss
index 1b9dba4b1..52e398ce7 100644
--- a/src/components/Sidebar.scss
+++ b/src/components/Sidebar.scss
@@ -1,11 +1,6 @@
 .Sidebar {
   padding: 1rem;
 
-  h3 {
-    margin: 0;
-    margin-bottom: 1rem;
-  }
-
   ul {
     margin: 0;
     padding-left: 1rem;
@@ -26,4 +21,41 @@
       font-weight: bold;
     }
   }
+
+  h3 {
+    margin: 0;
+  }
+
+  button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    width: 3rem;
+    display: none;
+
+    @media (max-width: 760px) {
+      display: block;
+    }
+  }
+
+  .Sidebar-top {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  nav {
+    margin-top: 1rem;
+
+    @media (max-width: 760px) {
+      display: none;
+    }
+  }
+
+  &.is-open {
+    nav {
+      @media (max-width: 760px) {
+        display: block;
+      }
+    }
+  }
 }
diff --git a/src/pages/reference.js b/src/pages/reference.js
index 441065818..a4bcc4bd9 100644
--- a/src/pages/reference.js
+++ b/src/pages/reference.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Container from '../components/Container';
 import Layout from '../components/Layout';
@@ -56,15 +56,23 @@ const pages = [
   },
 ];
 
-const Reference = () => (
-  <Layout>
-    <Container className="ReferenceTemplate">
-      <Sidebar pages={pages} />
-      <main className="ReferenceTemplate-content">
-        The main page content goes here
-      </main>
-    </Container>
-  </Layout>
-);
+const Reference = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Layout>
+      <Container className="ReferenceTemplate">
+        <Sidebar
+          pages={pages}
+          isOpen={isOpen}
+          toggle={() => setIsOpen(!isOpen)}
+        />
+        <main className="ReferenceTemplate-content">
+          The main page content goes here
+        </main>
+      </Container>
+    </Layout>
+  );
+};
 
 export default Reference;
diff --git a/src/templates/Reference.scss b/src/templates/Reference.scss
index cbf6e6b87..6814d6750 100644
--- a/src/templates/Reference.scss
+++ b/src/templates/Reference.scss
@@ -1,10 +1,18 @@
 .ReferenceTemplate {
   display: grid;
   grid-template-columns: 1fr 3fr;
+  grid-template-areas: 'sidebar main';
+
+  @media (max-width: 760px) {
+    grid-template-columns: none;
+    grid-template-areas: 'sidebar' 'main';
+  }
 
   .Sidebar {
+    grid-area: sidebar;
   }
 
   .ReferenceTemplate-content {
+    grid-area: main;
   }
 }