docs(website): convert docs mobile nav from select to nav element and list (#1696)

* website: redo mobile nav to use Link and be rid of select input

* fix react className prop

* add zebapy to contributors

* website: upgrade gatsby deps to release candidate

* fix lint

.all-contributorsrc

@@ -1059,6 +1059,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "zebapy",
+      "name": "Zeb Pykosz",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/2199845?v=4",
+      "profile": "https://zeb.codes",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -1,5 +1,5 @@
 # Netlify CMS
-[![All Contributors](https://img.shields.io/badge/all_contributors-120-orange.svg)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-121-orange.svg)](#contributors)
 [![Open Source Helpers](https://www.codetriage.com/netlify/netlify-cms/badges/users.svg)](https://www.codetriage.com/netlify/netlify-cms)
 [![](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/netlify/netlifycms)
 

website/src/components/mobile-nav.js

@@ -1,26 +1,49 @@
 import React, { Component } from 'react';
+import { Link } from 'gatsby';
 
 class MobileNav extends Component {
-  handleChange = event => {
-    this.props.history.push(event.target.value);
+  state = {
+    isOpen: false,
+  };
+  toggleNav = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
   };
   render() {
     const { items } = this.props;
+    const { isOpen } = this.state;
 
     return (
-      <div className="mobile docs-nav">
-        <select className="btn-primary" onChange={this.handleChange}>
-          <option>Select A Topic</option>
-          {items.map(item => (
-            <optgroup label={item.title} key={item.title}>
-              {item.group.edges.map(({ node }) => (
-                <option value={node.fields.slug} key={node.fields.slug} className="nav-link">
-                  {node.frontmatter.title}
-                </option>
+      <div className="mobile-docs-nav">
+        <button className="btn-primary mobile-docs-nav-btn" onClick={this.toggleNav}>
+          {isOpen ? <span>&times;</span> : <span>&#9776;</span>} {isOpen ? 'Hide' : 'Show'}{' '}
+          Navigation
+        </button>
+        {isOpen && (
+          <nav className="mobile-docs-nav-content">
+            <ul className="mobile-docs-nav-list">
+              {items.map(item => (
+                <li key={item.title} className="mobile-docs-nav-item">
+                  {item.title}
+                  <ul className="mobile-docs-nav-list">
+                    {item.group.edges.map(({ node }) => (
+                      <li key={node.fields.slug} className="mobile-docs-nav-item">
+                        <Link
+                          to={node.fields.slug}
+                          className="mobile-docs-nav-link"
+                          onClick={this.toggleNav}
+                        >
+                          {node.frontmatter.title}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </li>
               ))}
-            </optgroup>
-          ))}
-        </select>
+            </ul>
+          </nav>
+        )}
       </div>
     );
   }

website/src/css/imports/docs.css

@@ -21,43 +21,6 @@
       overflow-y: auto;
     }
 
-    &.mobile {
-      display: block;
-      position: relative;
-
-      @media screen and (min-width: $tablet) {
-        display: none;
-      }
-
-      &:after {
-        content: ' ';
-        position: absolute;
-        top: 7px;
-        right: 20px;
-        width: 0;
-        height: 0;
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-top: 5px solid $grey;
-        z-index: 3;
-      }
-
-      select {
-        border: none;
-        border-radius: $borderRadius !important;
-        cursor: pointer;
-        margin: -$medium auto $medium auto;
-        width: 100%;
-        position: relative;
-        padding: 14px 20px;
-        z-index: 2;
-        outline: none;
-        box-shadow: none;
-        -webkit-appearance: none;
-        -webkit-border-radius: 100px;
-      }
-    }
-
     .nav-link,
     .subnav-link {
       display: block;
@@ -236,3 +199,44 @@
   margin: 48px 0 0;
   line-height: 36px;
 }
+
+.mobile-docs-nav {
+  display: block;
+  position: relative;
+  margin-bottom: $small;
+
+  @media screen and (min-width: $tablet) {
+    display: none;
+  }
+}
+
+.mobile-docs-nav-btn {
+  display: block;
+  width: 100%;
+}
+
+.mobile-docs-nav-content {
+  /* border: 1px solid $lightishGrey; */
+  background-color: $lighterGrey;
+  padding: $tiny;
+}
+
+.mobile-docs-nav-list {
+  list-style: none;
+  margin: 0;
+
+  .mobile-docs-nav-list {
+    margin-left: $small;
+  }
+}
+
+.mobile-docs-nav-item {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.mobile-docs-nav-link {
+  font-size: 16px;
+  display: block;
+  padding: $micro;
+}