From 0e27a473c5c2cff1a56bf58b7bb22e51babbbb68 Mon Sep 17 00:00:00 2001
From: Mathieu David <mathieudavid@mathieudavid.org>
Date: Wed, 29 Jul 2015 13:34:48 +0200
Subject: [PATCH] Sidebar is now hidden on mobile devices and can be
 hidden/shown with the button

---
 src/theme/book.css  | 73 ++++++++++++++++++++++++---------------------
 src/theme/book.js   | 17 +++++++++++
 src/theme/index.hbs |  3 +-
 3 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index f151660c..6404b59c 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -3,50 +3,55 @@ html, body {
     color: #333;
 }
 
-@media only screen {
-    .sidebar {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 300px;
-        overflow-y: auto;
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-        padding: 10px 10px;
-        font-size: 14px;
-        box-sizing: border-box;
-        -webkit-overflow-scrolling: touch;
-        background-color: #fafafa;
-        color: #364149;
-    }
 
-    .page-wrapper {
-        position: absolute;
-        overflow-y: auto;
-        left: 310px;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        box-sizing: border-box;
-        background: none repeat scroll 0 0 #FFF;
-        -webkit-overflow-scrolling: touch;
-    }
+.sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 300px;
+    overflow-y: auto;
+    border-right: 1px solid rgba(0, 0, 0, 0.07);
+    padding: 10px 10px;
+    font-size: 14px;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    background-color: #fafafa;
+    color: #364149;
+
+    /* 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: 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 {
diff --git a/src/theme/book.js b/src/theme/book.js
index e69de29b..643755e5 100644
--- a/src/theme/book.js
+++ b/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"});
+        }
+    });
+
+});
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index d01d9374..607644fb 100644
--- a/src/theme/index.hbs
+++ b/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>