Sidebar is now hidden on mobile devices and can be hidden/shown with the button

src/theme/book.css

@@ -3,8 +3,8 @@ html, body {
     color: #333;
 }
 
-@media only screen {
-    .sidebar {
+
+.sidebar {
     position: absolute;
     left: 0;
     top: 0;
@@ -18,35 +18,40 @@ html, body {
     -webkit-overflow-scrolling: touch;
     background-color: #fafafa;
     color: #364149;
-    }
 
-    .page-wrapper {
+    /* Animation: slide away */
+    -webkit-transition: left 0.5s; /* Safari */
+    -o-transition: left 0.5s; /* Opera */
+    -moz-transition: left 0.5s; /* Mozilla Firefox */
+    transition: left 0.5s;
+}
+
+.page-wrapper {
     position: absolute;
     overflow-y: auto;
-        left: 310px;
+    left: 315px;
     right: 0;
     top: 0;
     bottom: 0;
     box-sizing: border-box;
     background: none repeat scroll 0 0 #FFF;
     -webkit-overflow-scrolling: touch;
-    }
+
+    /* Animation: slide away */
+    -webkit-transition: left 0.5s; /* Safari */
+    -o-transition: left 0.5s; /* Opera */
+    -moz-transition: left 0.5s; /* Mozilla Firefox */
+    transition: left 0.5s;
 }
 
 @media only screen and (max-width: 1060px) {
     .sidebar {
-        width: 100%;
-        margin-right: 0;
-        top: 40px;
+        left: -300px;
     }
     .page-wrapper {
-        top: 40px;
         left: 15px;
         padding-right: 15px;
     }
-    .mobile-hidden {
-        display: none;
-    }
 }
 
 .page {

src/theme/book.js

@@ -0,0 +1,17 @@
+$( document ).ready(function() {
+
+    // Interesting DOM Elements
+    var sidebar = $("#sidebar");
+    var page_wrapper = $("#page-wrapper");
+
+    $("#sidebar-toggle").click(function(event){
+        if(sidebar.position().left === 0){
+            sidebar.css({left: "-300px"});
+            page_wrapper.css({left: "15px"});
+        } else {
+            sidebar.css({left: "0"});
+            page_wrapper.css({left: "315px"});
+        }
+    });
+
+});

src/theme/index.hbs

@@ -20,7 +20,7 @@
         <div id="page-wrapper" class="page-wrapper">
 
             <div id="menu-bar" class="menu-bar">
-                <i class="fa fa-bars left"></i>
+                <i id="sidebar-toggle" class="fa fa-bars left"></i>
                 <h1 class="menu-title">{{ title }}</h1>
             </div>
 
@@ -30,6 +30,7 @@
 
         </div>
 
+        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
         <script src="book.js"></script>
     </body>
 </html>