Provide mobile toc

Closes gh-2

Author: philwebb

src/main/css/asciidoctor.css

@@ -120,7 +120,8 @@
   font-weight: var(--asciidoctor-heading-font-weight);
   hyphens: none;
   line-height: 1.3;
-  margin: 2.5rem 0 0;
+  margin: 1.3rem 0 0;
+  padding-top: 1.8rem;
 }
 
 .doc h1.sect0 {
@@ -131,13 +132,13 @@
 }
 
 .doc h1:first-child {
-  margin: 1.5rem 0;
+  margin: 1.3rem 0;
 }
 
 .doc h2:not(.discrete) {
   margin-left: -1rem;
   margin-right: -1rem;
-  padding: 0.4rem 1rem 0.1rem;
+  padding: 1.8rem 1rem 0.1rem;
 }
 
 .doc h3:not(.discrete) {

src/main/css/layout.css

@@ -22,8 +22,9 @@
 
 #banner {
   height: 100%;
-  background: var(--layout-banner-logo) no-repeat top 18px left 18px / auto
-    calc(var(--layout-banner-height) - 30px);
+  background: var(--layout-banner-logo) no-repeat top
+    var(--layout-banner-logo-offset) left var(--layout-banner-logo-offset) /
+    auto var(--layout-banner-logo-height);
 }
 
 #doc {
@@ -35,10 +36,6 @@
   margin: 0 auto;
 }
 
-#navbar-container {
-  display: none;
-}
-
 div#switch-theme,
 #switch-theme label {
   display: none;

src/main/css/settings-dark.css

@@ -54,6 +54,7 @@ html.dark-theme {
 
   /* TOC */
   --toc-back-to-index-filter: invert();
+  --toc-bar-button-filter: invert();
 
   /* Code Tools */
   --codetools-button-filter: invert();

src/main/css/settings.css

@@ -42,6 +42,8 @@
 
   /* Layout */
   --layout-banner-logo: url("../img/banner-logo.svg");
+  --layout-banner-logo-offset: 18px;
+  --layout-banner-logo-height: 50px;
   --layout-max-width: 1400px;
   --layout-banner-height: 80px;
   --layout-border-color: var(--color-accent-1);
@@ -139,6 +141,9 @@
   --toc-active-background-color: var(--selected-background-color);
   --toc-active-font-color: var(--body-background-color);
   --toc-back-to-index-filter: none;
+  --toc-bar-display: none;
+  --toc-bar-height: 0;
+  --toc-bar-button-filter: none;
 
   /* Code Tools */
   --codetools-button-filter: none;
@@ -164,6 +169,12 @@
 
 @media screen and (max-width: 800px) {
   :root {
+    --layout-banner-height: 51px;
+    --layout-banner-logo-height: 30px;
+    --layout-banner-logo-offset: 10px;
+    --layout-border-color: var(--body-background-color);
+    --toc-bar-display: block;
+    --toc-bar-height: 24px;
     --toc-width: 0;
     --toc-display: none;
     --asciidoctor-doc-embellishment-background: none;

src/main/css/toc.css

@@ -63,7 +63,7 @@ body.toc-left #doc {
   background-color: var(--toc-hover-background-color);
 }
 
-#toc.fixed-toc {
+body.fixed-toc #toc {
   position: fixed;
   top: 0;
   overflow-x: scroll;
@@ -109,3 +109,61 @@ body.toc-left #doc {
   min-height: 16px;
   left: 1.4rem;
 }
+
+#tocbar-container {
+  display: var(--toc-bar-display);
+  width: 100%;
+}
+
+#tocbar-container {
+  height: var(--tocbar-height);
+  background-color: var(--body-background-color);
+  border-bottom: 1px solid var(--panel-border-color);
+  z-index: 10000;
+}
+
+#tocbar {
+  width: 100%;
+  height: 100%;
+  padding-left: 6px;
+}
+
+body.fixed-toc #tocbar-container {
+  position: fixed;
+  top: 0;
+}
+
+button#toggle-toc {
+  width: var(--toc-bar-height);
+  height: var(--toc-bar-height);
+  filter: var(--toc-bar-button-filter);
+  background: no-repeat center / 16px 16px;
+  background-image: url("../img/octicons-16.svg#view-three-bars");
+  border: none;
+  outline: none;
+  padding: 0;
+  display: block;
+}
+
+body.show-toc button#toggle-toc {
+  background-image: url("../img/octicons-16.svg#view-x");
+}
+
+@media screen and (max-width: 800px) {
+  body.fixed-toc #toc {
+    top: var(--toc-bar-height);
+  }
+
+  #toc {
+    top: calc(var(--layout-banner-height) + var(--toc-bar-height));
+    width: 100%;
+    height: 100%;
+    left: 0;
+    background-color: var(--body-background-color);
+    z-index: 10000;
+  }
+
+  body.show-toc #toc {
+    display: block;
+  }
+}

src/main/img/octicons-16.svg

@@ -23,6 +23,7 @@
   const debugMode = false;
 
   const tocElement = document.querySelector("#toc");
+  const toggleTocElement = document.querySelector("#toggle-toc");
   const contentElement = document.querySelector("#content");
 
   if (!tocElement || !contentElement) {
@@ -33,11 +34,11 @@
   const hrefToTocAnchorElement = buildHrefToTocAnchorElement();
   const headingElementToTocElement = buildHeadingElementToTocElement();
 
-  let fixedPositionTop = null;
   let lastActiveTocElement = null;
   let disableOnScroll = false;
 
   tocElement.addEventListener("click", onTocElementClick);
+  toggleTocElement.addEventListener("click", onToggleTocClick);
   window.addEventListener("load", onLoad);
 
   function findHeadingElements() {
@@ -105,6 +106,7 @@
     window.addEventListener("hashchange", onLocationHashChange);
     window.addEventListener("scroll", onScroll);
     window.addEventListener("scroll", onEndScroll);
+    window.addEventListener("resize", onResize);
   }
 
   function onLocationHashChange() {
@@ -119,12 +121,16 @@
     onEndScroll();
   }
 
-  const onScroll = throttle(function () {
-    updateFixedPositionClass();
-    if (!disableOnScroll) {
-      activateTopHeadingTocElement();
-    }
-  }, 50);
+  const onScroll = throttle(
+    function () {
+      updateFixedPositionClass();
+      if (!disableOnScroll) {
+        activateTopHeadingTocElement();
+      }
+    },
+    50,
+    { leading: true }
+  );
 
   const onEndScroll = debounce(function () {
     debug("scrolling ended");
@@ -141,6 +147,14 @@
     }
   }, 50);
 
+  const onResize = throttle(
+    function () {
+      updateFixedPositionClass();
+    },
+    50,
+    { leading: true }
+  );
+
   function onTocElementClick(event) {
     if (event.target.nodeName === "A") {
       const parentElement = event.target.parentElement;
@@ -153,15 +167,26 @@
     }
   }
 
-  function updateFixedPositionClass() {
-    const top = getTop();
-    if (fixedPositionTop === null) {
-      fixedPositionTop = tocElement.offsetTop;
+  function onToggleTocClick(event) {
+    event.stopPropagation();
+    const showing = document.body.classList.toggle("show-toc");
+    if (showing) {
+      document.documentElement.addEventListener("click", onToggleTocClick);
+    } else {
+      document.documentElement.removeEventListener("click", onToggleTocClick);
     }
-    if (top > fixedPositionTop) {
-      tocElement.classList.add("fixed-toc");
+  }
+
+  function updateFixedPositionClass() {
+    const computedStyle = window.getComputedStyle(document.documentElement);
+    const bannerHeight = parseInt(
+      computedStyle.getPropertyValue("--layout-banner-height"),
+      10
+    );
+    if (getTop() >= bannerHeight) {
+      document.body.classList.add("fixed-toc");
     } else {
-      tocElement.classList.remove("fixed-toc");
+      document.body.classList.remove("fixed-toc");
     }
   }
 
@@ -224,7 +249,7 @@
   }
 
   function isInViewport(element) {
-    if(!element) {
+    if (!element) {
       return false;
     }
     const rect = element.getBoundingClientRect();

src/main/js/site/toc.js

@@ -6,8 +6,10 @@
     </div>
   </div>
 </div>
-<div id="navbar-container" class="container" role="navigation">
-  <div id="navbar" class="contained" role="navigation"></div>
+<div id="tocbar-container" class="container" role="navigation">
+  <div id="tocbar" class="contained" role="navigation">
+    <button id="toggle-toc"></button>
+  </div>
 </div>
 <div id="main-container" class="container">
   <div id="main" class="contained">