Mobile off canvas sidebar nav that slides in

documentation/v2/body.html

@@ -4,11 +4,11 @@
 </nav>
 
 <div class="container-fluid" id="top">
-  <div class="row">
-    <nav class="col-sm-4 col-md-3 sidebar">
+  <div class="row row-offcanvas row-offcanvas-left">
+    <nav class="sidebar col-xs-12 col-lg-3 sidebar-offcanvas">
       <%= include('nav.html') %>
     </nav>
-    <main class="col-sm-8 offset-sm-4 col-md-9 offset-md-3 main">
+    <main class="main col-xs-12 col-lg-9 offset-lg-3">
 
       <section id="overview">
         <%= htmlFor('introduction') %>

documentation/v2/code.html

@@ -10,7 +10,7 @@
   <% if (run) { %>
   <div class="row">
     <div class="col-xs-12 text-xs-right">
-      <button type="button" class="btn btn-primary" data-example="<%= file %>" data-run="<%= escape(run) %>"><% if (run === true) { %>▶<% } else { %><small>▶</small>&ensp;<%= run.replace(/"/g, '&quot;') %><% } %></button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="<%= file %>" data-run="<%= escape(run) %>"><% if (run === true) { %>▶<% } else { %><small>▶</small>&ensp;<%= run.replace(/"/g, '&quot;') %><% } %></button>
     </div>
   </div>
   <% } %>

documentation/v2/docs.coffee

@@ -1,57 +1,63 @@
-# Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
-$('body').scrollspy
-  target: '#nav'
-  offset: Math.round $('main').css('padding-top').replace('px', '')
-
-if window.location.hash?
-  $(".nav-link.active[href!='#{window.location.hash}']").removeClass 'active'
-
-$(window).on 'activate.bs.scrollspy', (event, target) -> # Why `window`? https://github.com/twbs/bootstrap/issues/20086
-  # We only want one active link in the nav
-  $(".nav-link.active[href!='#{target.relatedTarget}']").removeClass 'active'
-  $target = $(".nav-link[href='#{target.relatedTarget}']")
-  # Update the browser address bar on scroll or navigation
-  window.history.pushState {}, $target.text(), $target.prop('href')
+$(document).ready ->
+  # Mobile navigation
+  $('[data-toggle="offcanvas"]').click ->
+    $('.row-offcanvas').toggleClass 'active'
 
 
-# Initialize CodeMirror for code examples; https://codemirror.net/doc/manual.html
-editors = []
-lastCompilationElapsedTime = 200
-$('textarea').each (index) ->
-  $(@).data 'index', index
-  mode = if $(@).hasClass('javascript-output') then 'javascript' else 'coffeescript'
+  # Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
+  $('body').scrollspy
+    target: '#nav'
+    offset: Math.round $('main').css('padding-top').replace('px', '')
 
-  editors[index] = editor = CodeMirror.fromTextArea @,
-    mode: mode
-    theme: 'default' # TODO: Change
-    indentUnit: 2
-    tabSize: 2
-    lineWrapping: on
-    lineNumbers: off
-    inputStyle: 'contenteditable'
-    readOnly: if mode is 'coffeescript' then no else 'nocursor'
-    viewportMargin: Infinity
+  if window.location.hash?
+    $(".nav-link.active[href!='#{window.location.hash}']").removeClass 'active'
 
-  # Whenever the user edits the CoffeeScript side of a code example, update the JavaScript output
-  if mode is 'coffeescript'
-    pending = null
-    editor.on 'change', (instance, change) ->
-      clearTimeout pending
-      pending = setTimeout ->
-        lastCompilationStartTime = Date.now()
-        try
-          output = CoffeeScript.compile editor.getValue(), bare: yes
-          lastCompilationElapsedTime = Math.max(200, Date.now() - lastCompilationStartTime)
-        catch exception
-          output = "#{exception}"
-        editors[index + 1].setValue output
-      , lastCompilationElapsedTime
+  $(window).on 'activate.bs.scrollspy', (event, target) -> # Why `window`? https://github.com/twbs/bootstrap/issues/20086
+    # We only want one active link in the nav
+    $(".nav-link.active[href!='#{target.relatedTarget}']").removeClass 'active'
+    $target = $(".nav-link[href='#{target.relatedTarget}']")
+    # Update the browser address bar on scroll or navigation
+    window.history.pushState {}, $target.text(), $target.prop('href')
 
 
-# Handle the code example buttons
-$('button').click ->
-  run = $(@).data 'run'
-  index = $("##{$(@).data('example')}-js").data 'index'
-  js = editors[index].getValue()
-  js = "#{js}\nalert(#{unescape run});" unless run is yes
-  eval js
+  # Initialize CodeMirror for code examples; https://codemirror.net/doc/manual.html
+  editors = []
+  lastCompilationElapsedTime = 200
+  $('textarea').each (index) ->
+    $(@).data 'index', index
+    mode = if $(@).hasClass('javascript-output') then 'javascript' else 'coffeescript'
+
+    editors[index] = editor = CodeMirror.fromTextArea @,
+      mode: mode
+      theme: 'default' # TODO: Change
+      indentUnit: 2
+      tabSize: 2
+      lineWrapping: on
+      lineNumbers: off
+      inputStyle: 'contenteditable'
+      readOnly: if mode is 'coffeescript' then no else 'nocursor'
+      viewportMargin: Infinity
+
+    # Whenever the user edits the CoffeeScript side of a code example, update the JavaScript output
+    if mode is 'coffeescript'
+      pending = null
+      editor.on 'change', (instance, change) ->
+        clearTimeout pending
+        pending = setTimeout ->
+          lastCompilationStartTime = Date.now()
+          try
+            output = CoffeeScript.compile editor.getValue(), bare: yes
+            lastCompilationElapsedTime = Math.max(200, Date.now() - lastCompilationStartTime)
+          catch exception
+            output = "#{exception}"
+          editors[index + 1].setValue output
+        , lastCompilationElapsedTime
+
+
+  # Handle the code example buttons
+  $('[action="run-code-example"]').click ->
+    run = $(@).data 'run'
+    index = $("##{$(@).data('example')}-js").data 'index'
+    js = editors[index].getValue()
+    js = "#{js}\nalert(#{unescape run});" unless run is yes
+    eval js

documentation/v2/docs.css

@@ -1,9 +1,20 @@
-/* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css */
+/* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css and http://v4-alpha.getbootstrap.com/examples/offcanvas/offcanvas.css */
 
+html,
+body {
+  /* Prevent scroll on narrow devices */
+  overflow-x: hidden;
+}
 body {
   /* Required for Scrollspy */
   position: relative;
 }
+@media screen and (max-width: 991px) {
+  body {
+    padding-top: 3em;
+  }
+}
+
 /*
  * Header
  */
@@ -29,23 +40,19 @@ body {
  */
 
 .sidebar {
-  /* Hide for mobile, show later */
-  display: none;
-}
-@media (min-width: 768px) {
-  .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1000;
-    display: block;
-    padding: 1.3em;
-    overflow-x: hidden;
-    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-    background-color: #f5f5f5;
-    border-right: 1px solid #eee;
-  }
+  background-color: #f5f5f5;
+  border-right: 1px solid #eee;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  display: block;
+  padding-top: 1.3em;
+  padding-left: 1.6em;
+  padding-right: 1.6em;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 }
 
 .nav-link.active,
@@ -59,6 +66,38 @@ body {
 }
 
 
+/*
+ * Off Canvas
+ */
+@media screen and (max-width: 991px) {
+  .row-offcanvas {
+    position: relative;
+    transition: all .25s ease-in-out;
+  }
+
+  .row-offcanvas-left {
+    left: 0;
+  }
+
+  .row-offcanvas-left .sidebar-offcanvas {
+    left: -66.667%;
+  }
+  .row-offcanvas-right.active {
+    right: calc(66.667% + 1em);
+  }
+
+  .row-offcanvas-left.active {
+    left: calc(66.667% + 1em);
+  }
+
+  .sidebar-offcanvas {
+    position: absolute;
+    top: 0;
+    width: 66.667%;
+  }
+}
+
+
 /*
  * Main content
  */
@@ -66,7 +105,7 @@ body {
 .main {
   padding: 1.3em;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .main {
     padding-right: 2em;
     padding-left: 2em;