Added burger menu to the website

Author: syrusakbary

docs/css/bm.css

@@ -0,0 +1,41 @@
+/* Position and sizing of burger button */
+.bm-burger-button {
+  position: absolute;
+  width: 24px;
+  height: 20px;
+  right: 36px;
+  top: 42px;
+}
+ 
+/* Color/shape of burger icon bars */
+.bm-burger-bars {
+  background: white;
+}
+ 
+/* Color of close button cross */
+.bm-cross {
+  background: #bdc3c7;
+  margin-top: -1px;
+  width: 1px!important;
+  height: 18px!important;
+}
+ 
+/* Background color of sidebar */
+.bm-menu {
+  background: #3c3c3c;
+  box-shadow: -1px 0 5px rgba(0,0,0,.15);
+}
+ 
+/* Morph shape necessary with bubble or elastic */
+.bm-morph-shape {
+  fill: white;
+}
+ 
+.bm-menu-wrap {
+  z-index: 10000!important;
+}
+/* General menu styles */
+.bm-menu {
+  padding: 2.5em 1.5em 0;
+  font-size: 1.15em;
+}

docs/css/main.styl

@@ -2,6 +2,7 @@
 @import 'jeet'
 
 @import 'hljs.css'
+@import 'bm.css'
 @import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,200,100&.css'
 
 normalize-css()
@@ -104,7 +105,36 @@ html, body
       left 50%
       margin-left -3px
       bottom -24px
-      
+
+  +below(600px)
+    display none
+
+.bm-burger-button, .bm-menu-wrap, .bm-overlay
+  display none
+  +below(600px)
+    display block
+
+.bm-burger-button
+  z-index 300!important
+
+.bm-overlay
+  z-index 1000!important
+
+.bm-item-list
+  a
+    font-family 'Raleway'
+    display block
+    font-size 15px
+    color #CCC
+    margin 6px 0
+    padding 10px 6px
+    text-transform uppercase
+    font-weight 500
+    line-height 20px
+    position relative
+    &:hover
+      color white
+
 .header-logo
   font-family 'Raleway'
   font-size 22px
@@ -254,6 +284,8 @@ $title
 .markdown
   .wrapper
     margin-top 60px
+    +below(600px)
+      margin-top 30px
 
   h1, h2, h3, h4, h5, h6
     @extend $title
@@ -313,6 +345,9 @@ $title
     color: #585858;
     line-height: 50px;
 
+  +below(600px)
+    padding 30px 0
+
 .docs
   @extend $wrapper
 

docs/package.json

@@ -20,6 +20,7 @@
     "lodash": "^3.10.1",
     "nib": "^1.1.0",
     "react": "^0.14.3",
+    "react-burger-menu": "^1.4.2",
     "react-document-title": "^2.0.1",
     "react-router": "^0.13.5",
     "rupture": "^0.6.1",

docs/pages/_template.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RouteHandler, Link, State } from 'react-router';
 import Icon from 'assets/icon'
+import {stack as Menu} from 'react-burger-menu';
 
 import Header from './_header'
 import logo from '!raw!assets/logo.svg'
@@ -12,6 +13,12 @@ class Template extends React.Component {
     var isIndex = path == '/';
     return (
       <div>
+        <Menu width={200} right>
+            <span><Link to="/try/">Try it out</Link></span>
+            <span><Link to="/docs/quickstart/" className={path.indexOf('/docs')==0?"active":null}>Docs</Link></span>
+            <span><Link to="/community/">Community</Link></span>
+            <a href="https://github.com/graphql-python/graphene/">Github</a>
+        </Menu>
         <header className="header">
             <div className="header-wrapper">
                 <Link className="header-logo" to="/">

docs/pages/docs/_template.js

@@ -37,7 +37,7 @@ class Template extends React.Component {
         <div className="docs">
           <aside className="docs-aside">
               {aside_links}
-              <select className="docs-aside-navselect" onChange={this.goToPage.bind(this)}>
+              <select className="docs-aside-navselect" value={this.props.page.path} onChange={this.goToPage.bind(this)}>
                   {aside_options}
               </select>
           </aside>