Fix #47 sidebar stays hidden even after page change

Author: azerupi

src/theme/book.css

@@ -30,9 +30,15 @@ body {
 }
 @media only screen and (max-width: 1060px) {
   .sidebar {
-    left: -300px;
+    left: -$sidebar-width;
   }
 }
+.sidebar-hidden .sidebar {
+  left: -300px;
+}
+.sidebar-visible . sidebar {
+  left: 0;
+}
 .chapter {
   list-style: none outside none;
   padding-left: 0;
@@ -85,6 +91,12 @@ body {
     padding-right: 15px;
   }
 }
+.sidebar-hidden .page-wrapper {
+  left: 15px;
+}
+.sidebar-visible .page-wrapper {
+  left: 315px;
+}
 .page {
   position: absolute;
   top: 0;

src/theme/book.js

@@ -3,12 +3,14 @@ $( document ).ready(function() {
     // url
     var url = window.location.pathname;
 
+
     // Set theme
     var theme = localStorage.getItem('theme');
     if (theme == null) { theme = 'light'; }
 
     set_theme(theme);
 
+
     // Syntax highlighting Configuration
     hljs.configure({
         tabReplace: '    ', // 4 spaces
@@ -21,19 +23,31 @@ $( document ).ready(function() {
 
 
     // Interesting DOM Elements
+    var html = $("html");
     var sidebar = $("#sidebar");
     var page_wrapper = $("#page-wrapper");
 
+
+    // Toggle sidebar
     $("#sidebar-toggle").click(function(event){
-        if(sidebar.position().left === 0){
-            sidebar.css({left: "-300px"});
-            page_wrapper.css({left: "15px"});
+        if ( html.hasClass("sidebar-hidden") ) {
+            html.removeClass("sidebar-hidden").addClass("sidebar-visible");
+            localStorage.setItem('sidebar', 'visible');
+        } else if ( html.hasClass("sidebar-visible") ) {
+            html.removeClass("sidebar-visible").addClass("sidebar-hidden");
+            localStorage.setItem('sidebar', 'hidden');
         } else {
-            sidebar.css({left: "0"});
-            page_wrapper.css({left: "315px"});
+            if(sidebar.position().left === 0){
+                html.addClass("sidebar-hidden");
+                localStorage.setItem('sidebar', 'hidden');
+            } else {
+                html.addClass("sidebar-visible");
+                localStorage.setItem('sidebar', 'visible');
+            }
         }
     });
 
+
     // Print button
     $("#print-button").click(function(){
         var printWindow = window.open("print.html");
@@ -43,6 +57,7 @@ $( document ).ready(function() {
         window.print();
     }
 
+
     // Theme button
     $("#theme-toggle").click(function(){
         if($('.theme-popup').length) {

src/theme/index.hbs

@@ -37,6 +37,13 @@
             $('body').removeClass().addClass(theme);
         </script>
 
+        <!-- Hide / unhide sidebar before it is displayed -->
+        <script type="text/javascript">
+            var sidebar = localStorage.getItem('sidebar');
+            if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
+            else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
+        </script>
+
         <div id="sidebar" class="sidebar">
             {{#toc}}{{/toc}}
         </div>

src/theme/stylus/page.styl

@@ -1,7 +1,9 @@
+@require 'variables'
+
 .page-wrapper {
     position: absolute
     overflow-y: auto
-    left: 315px
+    left: $sidebar-width + 15px
     right: 0
     top: 0
     bottom: 0
@@ -19,6 +21,14 @@
     }
 }
 
+.sidebar-hidden .page-wrapper {
+    left: 15px
+}
+
+.sidebar-visible .page-wrapper {
+    left: $sidebar-width + 15px
+}
+
 .page {
     position: absolute
     top: 0

src/theme/stylus/sidebar.styl

@@ -1,9 +1,11 @@
+@require 'variables'
+
 .sidebar {
     position: absolute
     left: 0
     top: 0
     bottom: 0
-    width: 300px
+    width: $sidebar-width
     overflow-y: auto
     padding: 10px 10px
     font-size: 0.875em
@@ -14,10 +16,18 @@
     transition: left 0.5s
 
     @media only screen and (max-width: 1060px) {
-        left: -300px
+        left: -$sidebar-width
     }
 }
 
+.sidebar-hidden .sidebar {
+    left: - $sidebar-width
+}
+
+.sidebar-visible . sidebar {
+    left: 0
+}
+
 .chapter {
     list-style: none outside none
     padding-left: 0

src/theme/stylus/variables.styl

@@ -0,0 +1 @@
+$sidebar-width = 300px