Use a flyout menu on narrow screens (graphql#1095)

Author: leebyron

src/assets/css/_css/graphql.less

@@ -158,14 +158,70 @@ header {
 }
 
 nav {
+  input {
+    display: none;
+  }
+
   @media screen and (min-width: 1020px) {
     float: left;
   }
-  @media screen and (max-width: 1019px) {
+
+  @media screen and (min-width: 720px) and (max-width: 1019px) {
     text-align: center;
     margin: 0 -1em;
   }
 
+  @media screen and (max-width: 719px) {
+    height: 50px;
+    position: relative;
+
+    input {
+      display: block;
+      float: right;
+      appearance: none;
+      background: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/img/menu.svg%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
+      width: 42px;
+      height: 42px;
+      margin: 4px 0;
+      cursor: pointer;
+
+      .hero & {
+        background: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/img/menu-white.svg%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
+      }
+    }
+
+    div {
+      display: none;
+    }
+
+    input:checked + div {
+      display: block;
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: 0;
+      a {
+        display: block;
+        background: white;
+        width: 100%;
+        left: 0;
+        .hero & {
+          background: @dark-color;
+          &:hover,
+          &:focus {
+            color: white;
+          }
+        }
+      }
+      a:not(:first-child) {
+        border-top: solid 1px #eee;
+        .hero & {
+          border-top-color: #666;
+        }
+      }
+    }
+  }
+
   a {
     color: #aaa;
     display: inline-block;
@@ -224,10 +280,11 @@ footer {
       }
     }
 
-    a, span {
+    a,
+    span {
       color: white;
       display: table;
-      margin: 2px -10px;
+      margin: 2px 15px 2px -10px;
       padding: 3px 10px;
       position: relative;
 
@@ -247,11 +304,13 @@ footer {
       margin: 0 0 10px;
 
       &,
-      & > a, & > span {
+      & > a,
+      & > span {
         color: lighten(@dark-color, 50%);
       }
 
-      & > a, & > span {
+      & > a,
+      & > span {
         margin: 0 -10px;
       }
     }

src/assets/css/_css/index.less

@@ -54,7 +54,7 @@ div.index {
         height: 13vh;
       }
 
-      nav > a {
+      nav a {
         text-shadow: 0 1px 1px @dark-color, 0 0 3px @dark-color;
 
         &:hover, &:focus {

src/components/HeaderLinks/index.tsx

@@ -11,22 +11,22 @@ const links: LinkItem[] = [
   {
     section: "learn",
     text: "Learn",
-    href: "/learn/"
+    href: "/learn/",
   },
   {
     section: "code",
     text: "Code",
-    href: "/code/"
+    href: "/code/",
   },
   {
     section: "community",
     text: "Community",
-    href: "/community/"
+    href: "/community/",
   },
   {
     section: "faq",
     text: "FAQ",
-    href: "/faq/"
+    href: "/faq/",
   },
   {
     section: "spec",
@@ -47,10 +47,13 @@ const links: LinkItem[] = [
 
 export default () => (
   <nav>
-    {links.map((link, i) => (
-      <Link key={i} href={link.href}>
-        {link.text}
-      </Link>
-    ))}
+    <input type="checkbox" id="menubox" aria-label="Menu" />
+    <div>
+      {links.map((link, i) => (
+        <Link key={i} href={link.href}>
+          {link.text}
+        </Link>
+      ))}
+    </div>
   </nav>
 )