Add cheap sidebar toggle

data/layout.jade

@@ -15,8 +15,9 @@ html
     meta(charset='utf-8')
     link(rel='stylesheet' href=(base + 'assets/style.css?t=' + (+new Date())))
     title= title
-  body
+  body.-menu-visible
     .doc-layout
+      .toggle.menu-toggle.js-menu-toggle
       .body
         .markdown-body
           != contents

data/script.js

@@ -4,6 +4,7 @@ var Nprogress = require('nprogress')
 var hljs = require('highlight.js')
 var onmount = require('onmount')
 var each = require('dom101').each
+var toggleClass = require('dom101').toggleClass
 var ready = require('dom101').ready
 
 /*
@@ -53,6 +54,16 @@ onmount('pre > code', function () {
   })
 })
 
+/*
+ * menu toggle
+ */
+
+onmount('.js-menu-toggle', function () {
+  this.addEventListener('click', function () {
+    toggleClass(document.body, '-menu-visible')
+  })
+})
+
 /*
  * onmount
  */
@@ -66,4 +77,3 @@ void (function () {
     onmount()
   })
 }())
-

data/style.sass

@@ -1,6 +1,9 @@
 @import './normalize.css/normalize'
 @import './github-markdown-css/github-markdown'
 @import './nprogress/nprogress'
+@import './iconfonts/stylesheets/ionicons'
+
+@include ion-font
 
 $black: #111
 $slate: #678
@@ -35,10 +38,21 @@ html, body
       padding-top: 32px
       order: 2
 
+    .menu
+      display: none
+
+    .-menu-visible & .menu
+      display: block
+
+//
+// Menu
+//
+
 .toc-menu
   $pad: 24px
 
   &
+    position: relative
     padding: ($pad - 4px) 0
     // background: #fdfefe
     box-shadow: inset -1px 0 #f3f3f3
@@ -132,3 +146,30 @@ html, body
   .spinner-icon
     border-top-color: $accent
     border-left-color: $accent
+
+//
+// Menu toggle
+
+.menu-toggle
+  &
+    display: block
+    width: 40px
+    height: 40px
+    line-height: 40px
+    text-align: center
+
+    position: absolute
+    left: 24px - 12px
+    bottom: 24px - 12px
+    color: $black
+    transition: color 400ms linear
+    border-radius: 3px
+    z-index: 10
+    cursor: pointer
+
+  &:before
+    @include ion-icon('navicon', 24px)
+
+  &:hover
+    color: $accent
+    transition: color 100ms linear

package.json

@@ -12,6 +12,7 @@
     "dom101": "1.0.0",
     "github-markdown-css": "2.0.10",
     "highlight.js": "8.8.0",
+    "iconfonts": "0.7.0",
     "jade": "1.11.0",
     "node-sass": "3.3.3",
     "normalize.css": "3.0.3",