Force hidden sidebar on load for screen widths smaller than sidebar plus content and simplify styles

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 {
+@media only screen and (min-width: 1251px) {
-  left: 15px;
+  .sidebar-visible .previous {
-}
-.sidebar-visible .previous {
     left: 315px;
+  }
 }
 @media only screen and (max-width: 1060px) {
   .nav-wrapper {

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) {

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');
+            var sidebar = 'hidden';
-            if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
+            if (document.body.clientWidth >= 1080)
-            else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
+                sidebar = store.get('mdbook-sidebar') || 'visible';
+            $("html").addClass("sidebar-" + sidebar);
         </script>
 
         <div id="sidebar" class="sidebar">

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
-    transition: left 0.5s
-
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
     left: $page-padding
-    }
+    transition: left 0.5s
 }
 .next { right: $page-padding }
 
-.sidebar-hidden .previous {
+@media only screen and (min-width: 1251px) {
-  left: $page-padding
+    .sidebar-visible .previous {
-}
-
-.sidebar-visible .previous {
         left: $sidebar-width + $page-padding
+    }
 }
 
 .nav-wrapper {

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