Merge pull request #2175 from qaqland/sidebar-pure-css

Sidebar but Pure CSS, fix #859

Author: Dylan-DPC

src/theme/css/chrome.css

@@ -93,7 +93,7 @@ a > .hljs {
     display: flex;
     margin: 0 5px;
 }
-.no-js .left-buttons {
+.no-js .left-buttons button {
     display: none;
 }
 
@@ -187,9 +187,10 @@ a > .hljs {
     .nav-wrapper { display: block; }
 }
 
+/* sidebar-visible */
 @media only screen and (max-width: 1380px) {
-    .sidebar-visible .nav-wide-wrapper { display: none; }
-    .sidebar-visible .nav-wrapper { display: block; }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
 }
 
 /* Inline code */
@@ -375,6 +376,7 @@ ul#searchresults span.teaser em {
     -ms-user-select: none;
     user-select: none;
 }
+.no-js .sidebar,
 .js:not(.sidebar-resizing) .sidebar {
     transition: transform 0.3s; /* Animation: slide away */
 }
@@ -402,8 +404,10 @@ ul#searchresults span.teaser em {
     cursor: col-resize;
     width: 5px;
 }
-.sidebar-hidden .sidebar {
+/* sidebar-hidden */
+#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
     transform: translateX(calc(0px - var(--sidebar-width)));
+    z-index: -1;
 }
 .sidebar::-webkit-scrollbar {
     background: var(--sidebar-bg);
@@ -412,11 +416,12 @@ ul#searchresults span.teaser em {
     background: var(--scrollbar);
 }
 
-.sidebar-visible .page-wrapper {
+/* sidebar-visible */
+#sidebar-toggle-anchor:checked ~ .page-wrapper {
     transform: translateX(var(--sidebar-width));
 }
 @media only screen and (min-width: 620px) {
-    .sidebar-visible .page-wrapper {
+    #sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
         margin-left: var(--sidebar-width);
     }

src/theme/css/general.css

@@ -84,7 +84,9 @@ h6:target::before {
 }
 .page-wrapper {
     box-sizing: border-box;
+    background-color: var(--bg);
 }
+.no-js .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }

src/theme/index.hbs

@@ -89,16 +89,20 @@
             html.classList.add('js');
         </script>
 
+        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
+
         <!-- Hide / unhide sidebar before it is displayed -->
         <script>
             var html = document.querySelector('html');
             var sidebar = null;
+            var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
             if (document.body.clientWidth >= 1080) {
                 try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                 sidebar = sidebar || 'visible';
             } else {
                 sidebar = 'hidden';
             }
+            sidebar_toggle.checked = sidebar === 'visible';
             html.classList.remove('sidebar-visible');
             html.classList.add("sidebar-" + sidebar);
         </script>
@@ -139,9 +143,9 @@
                 <div id="menu-bar-hover-placeholder"></div>
                 <div id="menu-bar" class="menu-bar sticky">
                     <div class="left-buttons">
-                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                             <i class="fa fa-bars"></i>
-                        </button>
+                        </label>
                         <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                             <i class="fa fa-paint-brush"></i>
                         </button>