From 71689da6b151c922f0bb69c54f0bc6545d585652 Mon Sep 17 00:00:00 2001
From: Shane Nelson <stgn@users.noreply.github.com>
Date: Fri, 13 Oct 2017 18:25:12 -0400
Subject: [PATCH] Force hidden sidebar on load for screen widths smaller than
 sidebar plus content and simplify styles

---
 src/theme/book.css              | 24 +++++-------------------
 src/theme/book.js               |  8 --------
 src/theme/index.hbs             |  7 ++++---
 src/theme/stylus/nav-icons.styl | 16 +++++-----------
 src/theme/stylus/sidebar.styl   |  8 --------
 5 files changed, 14 insertions(+), 49 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 6417c67b..cce56a22 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -67,20 +67,12 @@ table thead td {
   -ms-transition: left 0.5s;
   transition: left 0.5s;
 }
-@media only screen and (max-width: 1060px) {
-  .sidebar {
-    left: -300px;
-  }
-}
 .sidebar code {
   line-height: 2em;
 }
 .sidebar-hidden .sidebar {
   left: -300px;
 }
-.sidebar-visible .sidebar {
-  left: 0;
-}
 .chapter {
   list-style: none outside none;
   padding-left: 0;
@@ -243,26 +235,20 @@ table thead td {
   text-decoration: none;
 }
 .previous {
-  left: 315px;
+  left: 15px;
   -webkit-transition: left 0.5s;
   -moz-transition: left 0.5s;
   -o-transition: left 0.5s;
   -ms-transition: left 0.5s;
   transition: left 0.5s;
 }
-@media only screen and (max-width: 1060px) {
-  .previous {
-    left: 15px;
-  }
-}
 .next {
   right: 15px;
 }
-.sidebar-hidden .previous {
-  left: 15px;
-}
-.sidebar-visible .previous {
-  left: 315px;
+@media only screen and (min-width: 1251px) {
+  .sidebar-visible .previous {
+    left: 315px;
+  }
 }
 @media only screen and (max-width: 1060px) {
   .nav-wrapper {
diff --git a/src/theme/book.js b/src/theme/book.js
index 0f147a22..c85e7be1 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -68,14 +68,6 @@ $( document ).ready(function() {
     // Toggle sidebar
     $("#sidebar-toggle").click(sidebarToggle);
 
-    // Hide sidebar on section link click if it occupies large space
-    // in relation to the whole screen (phone in portrait)
-    $("#sidebar a").click(function(event){
-        if (sidebar.width() > window.screen.width * 0.4) {
-            sidebarToggle();
-        }
-    });
-
     // Scroll sidebar to current active section
     var activeSection = sidebar.find(".active");
     if(activeSection.length) {
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index bc5855f4..9df89a7e 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -62,9 +62,10 @@
 
         <!-- Hide / unhide sidebar before it is displayed -->
         <script type="text/javascript">
-            var sidebar = store.get('mdbook-sidebar');
-            if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
-            else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
+            var sidebar = 'hidden';
+            if (document.body.clientWidth >= 1080)
+                sidebar = store.get('mdbook-sidebar') || 'visible';
+            $("html").addClass("sidebar-" + sidebar);
         </script>
 
         <div id="sidebar" class="sidebar">
diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl
index 9e8b8b69..222cf444 100644
--- a/src/theme/stylus/nav-icons.styl
+++ b/src/theme/stylus/nav-icons.styl
@@ -20,21 +20,15 @@
 .mobile-nav-chapters { display: none }
 .nav-chapters:hover { text-decoration: none }
 .previous {
-    left: $sidebar-width + $page-padding
+    left: $page-padding
     transition: left 0.5s
-
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        left: $page-padding
-    }
 }
 .next { right: $page-padding }
 
-.sidebar-hidden .previous {
-  left: $page-padding
-}
-
-.sidebar-visible .previous {
-  left: $sidebar-width + $page-padding
+@media only screen and (min-width: 1251px) {
+    .sidebar-visible .previous {
+        left: $sidebar-width + $page-padding
+    }
 }
 
 .nav-wrapper {
diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl
index 122ae648..a3a15b37 100644
--- a/src/theme/stylus/sidebar.styl
+++ b/src/theme/stylus/sidebar.styl
@@ -15,10 +15,6 @@
     // Animation: slide away
     transition: left 0.5s
 
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        left: - $sidebar-width
-    }
-
     code {
         line-height: 2em;
     }
@@ -28,10 +24,6 @@
     left: - $sidebar-width
 }
 
-.sidebar-visible .sidebar {
-    left: 0
-}
-
 .chapter {
     list-style: none outside none
     padding-left: 0