add hamburger menu and remove oversized panels

Author: leobauza

packages/microcosm-www-next/src/layouts/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
@@ -12,21 +12,85 @@ if (isBrowser) {
   require('lazysizes') //lazy loading images
 }
 
-const Navigation = () => (
-  <nav className="navigation">
-    <div className="wrapper">
-      <h1>
-        <span className="screenreader-only">Microcosm</span>
-        <img src={microcosmLogo} alt="" />
-      </h1>
-
-      {/*
-        @TODO add menu back in later
-        <img src={menu} alt="menu" />
-      */}
-    </div>
-  </nav>
-)
+class Navigation extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      hidden: true
+    }
+  }
+
+  handleHamburger = () => {
+    const { hidden } = this.state
+
+    this.setState({
+      hidden: !hidden
+    })
+  }
+
+  closeHamburger = () => {
+    this.setState({
+      hidden: true
+    })
+  }
+
+  render() {
+    const { hidden } = this.state
+
+    return (
+      <nav onMouseLeave={this.closeHamburger} className="navigation">
+        <div className="wrapper">
+          <h1>
+            <span className="screenreader-only">Microcosm</span>
+            <img src={microcosmLogo} alt="" />
+          </h1>
+
+          <button
+            onClick={this.handleHamburger}
+            aria-controls="menu"
+            className="hamburger"
+          >
+            Open Navigation
+          </button>
+          <ul
+            id="menu"
+            aria-hidden={hidden || null}
+            className="hamburger-dropdown"
+          >
+            <li>
+              <a
+                href="http://code.viget.com/microcosm/guides/quickstart.html"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Microcosm Guides
+              </a>
+            </li>
+            <li>
+              <a
+                href="http://code.viget.com/microcosm/api/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Microcosm API
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/vigetlabs/microcosm"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Microcosm Github
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    )
+  }
+}
 
 const Footer = () => (
   <footer className="footer">

packages/microcosm-www-next/src/stylesheets/structure/_nav.scss

@@ -14,5 +14,54 @@
     display: flex;
     height: inherit;
     justify-content: space-between;
+    position: relative;
+  }
+}
+
+.hamburger {
+  background: none;
+  border-bottom: 3px solid white;
+  border-top: 3px solid white;
+  height: 23px;
+  position: relative;
+  text-indent: -9999px;
+  width: 28px;
+
+  &::after {
+    background: white;
+    border-top: 3px solid white;
+    content: "";
+    display: block;
+    height: 0;
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -1px);
+    width: 100%;
+  }
+}
+
+.hamburger-dropdown {
+  background: #aaa;
+  border: 1px solid #aaa;
+  position: absolute;
+  right: 0;
+  top: 100%;
+
+  border-top: none;
+
+  &[aria-hidden] {
+    display: none;
+  }
+
+  a {
+    display: block;
+    padding: 20px;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      background: white;
+      color: #aaa;
+    }
   }
 }

packages/microcosm-www-next/src/stylesheets/structure/_section.scss

@@ -7,27 +7,13 @@ $split-bg-height-desktop: 291px;
 
 .section {
   background-color: color(bg-0-bottom);
-  min-height: 140vh;
+  min-height: 100vh;
   padding-bottom: 60px;
   padding-top: $section-top-padding-mobile;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
 
-  &:last-child {
-      min-height: 100vh;
-  }
-
-  @include breakpoint(medium-desktop-up) {
-    @media (max-height: 900px) {  //from desktop up, if the screen is long enough (i.e. enough space), fix footer to bottom
-      min-height: 100vh;
-    }
-  }
-
-  @include breakpoint(small-desktop-down) {
-    min-height: 100vh;
-  }
-
   @include breakpoint(medium-desktop-up) {
     padding-top: $section-top-padding-desktop;
   }