From 6c240090ae27e73853ef8638bce29c99b32d9ab1 Mon Sep 17 00:00:00 2001
From: Mathieu David <mathieudavid@mathieudavid.org>
Date: Thu, 24 Sep 2015 16:47:33 +0200
Subject: [PATCH] Fix #47 sidebar stays hidden even after page change

---
 src/theme/book.css              | 14 +++++++++++++-
 src/theme/book.js               | 25 ++++++++++++++++++++-----
 src/theme/index.hbs             |  7 +++++++
 src/theme/stylus/page.styl      | 12 +++++++++++-
 src/theme/stylus/sidebar.styl   | 14 ++++++++++++--
 src/theme/stylus/variables.styl |  1 +
 6 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 src/theme/stylus/variables.styl

diff --git a/src/theme/book.css b/src/theme/book.css
index e8d13469..a500a7e0 100644
--- a/src/theme/book.css
+++ b/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;
diff --git a/src/theme/book.js b/src/theme/book.js
index 98e2bc87..297f5360 100644
--- a/src/theme/book.js
+++ b/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) {
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 65943b19..a8fdae1e 100644
--- a/src/theme/index.hbs
+++ b/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>
diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl
index 8ca5de37..62bb6cf3 100644
--- a/src/theme/stylus/page.styl
+++ b/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
diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl
index 9feb5a18..cf464a6a 100644
--- a/src/theme/stylus/sidebar.styl
+++ b/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
diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl
new file mode 100644
index 00000000..66b89df6
--- /dev/null
+++ b/src/theme/stylus/variables.styl
@@ -0,0 +1 @@
+$sidebar-width = 300px