feat(theme/stylus/menu): Make sticky (#551)

* feat(theme/stylus/menu): Make sticky

* feat(theme/stylus/menu): Faint bottom border

* feat(theme/book): Auto hide menu when scrolling down

* feat(theme/stylus/menu): Don't hide title

* feat(theme/stylus/menu): Only show bottom border when sticky

* fix(theme/stylus/menu): Don't hide when sidebar is expanded

* feat(theme/book): Show menu bar on hover

Author: sorin-davidoi

src/theme/book.css

@@ -1,7 +1,6 @@
 html {
   font-family: "Open Sans", sans-serif;
   color: #333;
-  overflow-x: hidden;
 }
 body {
   margin: 0;
@@ -144,8 +143,12 @@ table thead td {
 .content img {
   max-width: 100%;
 }
-.menu-bar {
-  position: relative;
+#menu-bar {
+  position: sticky;
+  top: 0;
+  z-index: 101;
+}
+#menu-bar > #menu-bar-sticky-container {
   display: -webkit-box;
   display: -moz-box;
   display: -webkit-flex;
@@ -158,9 +161,14 @@ table thead td {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-}
-.menu-bar i,
-.menu-bar .icon-button {
+  -webkit-transition: -webkit-transform 0.5s, border-bottom-color 0.5s;
+  -moz-transition: -moz-transform 0.5s, border-bottom-color 0.5s;
+  -o-transition: -o-transform 0.5s, border-bottom-color 0.5s;
+  -ms-transition: -ms-transform 0.5s, border-bottom-color 0.5s;
+  transition: transform 0.5s, border-bottom-color 0.5s;
+}
+#menu-bar i,
+#menu-bar .icon-button {
   position: relative;
   margin: 0 10px;
   z-index: 10;
@@ -171,10 +179,17 @@ table thead td {
   -ms-transition: color 0.5s;
   transition: color 0.5s;
 }
-.menu-bar i:hover,
-.menu-bar .icon-button:hover {
+#menu-bar i:hover,
+#menu-bar .icon-button:hover {
   cursor: pointer;
 }
+html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
+  -webkit-transform: translateY(-60px);
+  -moz-transform: translateY(-60px);
+  -o-transform: translateY(-60px);
+  -ms-transform: translateY(-60px);
+  transform: translateY(-60px);
+}
 .menu-title {
   display: inline-block;
   font-weight: 200;
@@ -193,19 +208,6 @@ table thead td {
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: opacity 0.5s ease-in-out;
-  -moz-transition: opacity 0.5s ease-in-out;
-  -o-transition: opacity 0.5s ease-in-out;
-  -ms-transition: opacity 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-}
-.menu-bar:hover .menu-title {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
 }
 .nav-chapters {
   font-size: 2.5em;
@@ -321,6 +323,18 @@ table thead td {
 .light .content .header:visited:hover {
   text-decoration: none;
 }
+.light .menu-bar {
+  margin: auto -15px;
+}
+.light .menu-bar > #menu-bar-sticky-container {
+  background-color: #fff;
+  border-bottom-color: #fff;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.light .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #f2f2f2;
+}
 .light .sidebar {
   background-color: #fafafa;
   color: #364149;
@@ -463,6 +477,18 @@ table thead td {
 .coal .content .header:visited:hover {
   text-decoration: none;
 }
+.coal .menu-bar {
+  margin: auto -15px;
+}
+.coal .menu-bar > #menu-bar-sticky-container {
+  background-color: #141617;
+  border-bottom-color: #141617;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.coal .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #1f2223;
+}
 .coal .sidebar {
   background-color: #292c2f;
   color: #a1adb8;
@@ -605,6 +631,18 @@ table thead td {
 .navy .content .header:visited:hover {
   text-decoration: none;
 }
+.navy .menu-bar {
+  margin: auto -15px;
+}
+.navy .menu-bar > #menu-bar-sticky-container {
+  background-color: #161923;
+  border-bottom-color: #161923;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.navy .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #1f2331;
+}
 .navy .sidebar {
   background-color: #282d3f;
   color: #c8c9db;
@@ -747,6 +785,18 @@ table thead td {
 .rust .content .header:visited:hover {
   text-decoration: none;
 }
+.rust .menu-bar {
+  margin: auto -15px;
+}
+.rust .menu-bar > #menu-bar-sticky-container {
+  background-color: #e1e1db;
+  border-bottom-color: #e1e1db;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.rust .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #d7d7cf;
+}
 .rust .sidebar {
   background-color: #3b2e2a;
   color: #c8c9db;
@@ -889,6 +939,18 @@ table thead td {
 .ayu .content .header:visited:hover {
   text-decoration: none;
 }
+.ayu .menu-bar {
+  margin: auto -15px;
+}
+.ayu .menu-bar > #menu-bar-sticky-container {
+  background-color: #0f1419;
+  border-bottom-color: #0f1419;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.ayu .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #182028;
+}
 .ayu .sidebar {
   background-color: #14191f;
   color: #c8c9db;

src/theme/book.js

@@ -1,4 +1,4 @@
-var html, sidebar, sidebarLinks, sidebarToggleButton;
+var html, sidebar, sidebarLinks, sidebarToggleButton, themeToggleButton, themePopup;
 
 document.addEventListener('DOMContentLoaded', function() {
 
@@ -77,8 +77,8 @@ document.addEventListener('DOMContentLoaded', function() {
     sidebar = document.getElementById("sidebar");
     sidebarLinks = document.querySelectorAll('#sidebar a');
     sidebarToggleButton = document.getElementById("sidebar-toggle");
-    var themeToggleButton = document.getElementById('theme-toggle');
-    var themePopup = document.getElementById('theme-list');
+    themeToggleButton = document.getElementById('theme-toggle');
+    themePopup = document.getElementById('theme-list');
 
     // Toggle sidebar
     sidebarToggleButton.addEventListener('click', sidebarToggle);
@@ -116,16 +116,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    function showThemes() {
-        themePopup.style.display = 'block';
-        themeToggleButton.setAttribute('aria-expanded', true);
-    }
-
-    function hideThemes() {
-        themePopup.style.display = 'none';
-        themeToggleButton.setAttribute('aria-expanded', false);
-    }
-
     // Theme button
     themeToggleButton.addEventListener('click', function(){
         if (themePopup.style.display === 'block') {
@@ -440,6 +430,16 @@ function sidebarToggle() {
     }
 }
 
+function showThemes() {
+    themePopup.style.display = 'block';
+    themeToggleButton.setAttribute('aria-expanded', true);
+}
+
+function hideThemes() {
+    themePopup.style.display = 'none';
+    themeToggleButton.setAttribute('aria-expanded', false);
+}
+
 function showSidebar() {
     html.classList.remove('sidebar-hidden')
     html.classList.add('sidebar-visible');
@@ -501,3 +501,29 @@ function run_rust_code(code_block) {
         .then(function(response) { result_block.innerText = response.success ? response.stdout : response.stderr; })
         .catch(function(error) { result_block.innerText = "Playground communication" + error.message; });
 }
+
+(function autoHideMenu() {
+    var scrollingContainer = document.querySelector('html');
+    var menu = document.getElementById('menu-bar');
+
+    var previousScrollTop = scrollingContainer.scrollTop;
+
+    document.addEventListener('scroll', function() {
+        if (menu.classList.contains('folded') && scrollingContainer.scrollTop < previousScrollTop) {
+            menu.classList.remove('folded');
+        } else if (!menu.classList.contains('folded') && scrollingContainer.scrollTop > previousScrollTop) {
+            menu.classList.add('folded');
+        }
+
+        if (!menu.classList.contains('bordered') && scrollingContainer.scrollTop > 0) {
+            menu.classList.add('bordered');
+        }
+
+        if (menu.classList.contains('bordered') && scrollingContainer.scrollTop === 0) {
+            menu.classList.remove('bordered');
+        }
+
+        previousScrollTop = scrollingContainer.scrollTop;
+        hideThemes();
+    }, { passive: true });
+})();

src/theme/index.hbs

@@ -70,28 +70,30 @@
             <div class="page">
                 {{> header}}
                 <div id="menu-bar" class="menu-bar">
-                    <div class="left-buttons">
-                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-controls="sidebar">
-                            <i class="fa fa-bars"></i>
-                        </button>
-                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
-                            <i class="fa fa-paint-brush"></i>
-                        </button>
-                        <ul id="theme-list" class="theme-popup" aria-label="submenu">
-                            <li><button class="theme" id="light">Light <span class="default">(default)</span></button></li>
-                            <li><button class="theme" id="rust">Rust</button></li>
-                            <li><button class="theme" id="coal">Coal</button></li>
-                            <li><button class="theme" id="navy">Navy</button></li>
-                            <li><button class="theme" id="ayu">Ayu</button></li>
-                        </ul>
-                    </div>
-
-                    <h1 class="menu-title">{{ book_title }}</h1>
-
-                    <div class="right-buttons">
-                        <a href="print.html" title="Print this book">
-                            <i id="print-button" class="fa fa-print"></i>
-                        </a>
+                    <div id="menu-bar-sticky-container">
+                        <div class="left-buttons">
+                            <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-controls="sidebar">
+                                <i class="fa fa-bars"></i>
+                            </button>
+                            <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
+                                <i class="fa fa-paint-brush"></i>
+                            </button>
+                            <ul id="theme-list" class="theme-popup" aria-label="submenu">
+                                <li><button class="theme" id="light">Light <span class="default">(default)</span></button></li>
+                                <li><button class="theme" id="rust">Rust</button></li>
+                                <li><button class="theme" id="coal">Coal</button></li>
+                                <li><button class="theme" id="navy">Navy</button></li>
+                                <li><button class="theme" id="ayu">Ayu</button></li>
+                            </ul>
+                        </div>
+
+                        <h1 class="menu-title">{{ book_title }}</h1>
+
+                        <div class="right-buttons">
+                            <a href="print.html" title="Print this book">
+                                <i id="print-button" class="fa fa-print"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
 

src/theme/stylus/general.styl

@@ -1,13 +1,12 @@
 html {
     font-family: "Open Sans", sans-serif
     color: #333
-    overflow-x: hidden
 }
 
 body {
     margin: 0;
     font-size: 1rem;
-    overflow-x: hidden
+    overflow-x: hidden;
 }
 
 code {

src/theme/stylus/menu.styl

@@ -1,7 +1,13 @@
-.menu-bar {
-    position: relative
-    display: flex
-    flex-wrap: wrap
+#menu-bar {
+    position: sticky
+    top: 0
+    z-index: 101
+
+    & > #menu-bar-sticky-container {
+        display: flex
+        flex-wrap: wrap
+        transition: transform 0.5s, border-bottom-color 0.5s
+    }
 
     i, .icon-button {
         position: relative
@@ -15,6 +21,11 @@
     }
 }
 
+
+html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container  {
+    transform: translateY(-60px);
+}
+
 .menu-title {
     display: inline-block
     font-weight: 200
@@ -26,11 +37,4 @@
     white-space: nowrap
     overflow: hidden
     text-overflow: ellipsis
-
-    opacity: 0
-    transition: opacity 0.5s ease-in-out
-}
-
-.menu-bar:hover .menu-title {
-    opacity: 1
 }

src/theme/stylus/themes/base.styl

@@ -12,6 +12,23 @@
         }
     }
 
+    .menu-bar {
+        margin: auto (- $page-padding);
+
+        & > #menu-bar-sticky-container {
+            background-color: $bg
+            border-bottom-color: $bg
+            border-bottom-width: 1px
+            border-bottom-style: solid
+        }
+
+        &.bordered > #menu-bar-sticky-container  {
+            border-bottom-color: $table-border-color
+        }
+    }
+
+    $table-border-color
+
     .sidebar {
         background-color: $sidebar-bg
         color: $sidebar-fg