subpage footer

book.toml

@@ -15,8 +15,8 @@ assets_version = "2.0.2" # do not edit: managed by `mdbook-admonish install`
 before = ["mermaid", "admonish"] # templates can include these so we run this first
 
 [output.html]
-additional-js = ['scripts/mermaid.min.js', 'scripts/mermaid-init.js', 'scripts/sidebar.js']
-additional-css = ['theme/mdbook-admonish.css', 'theme/ss14.css', 'theme/sidebar-style.css']
+additional-js = ['scripts/mermaid.min.js', 'scripts/mermaid-init.js', 'scripts/nav-additions.js']
+additional-css = ['theme/mdbook-admonish.css', 'theme/ss14.css', 'theme/nav-style.css']
 default-theme = "navy"
 preferred-dark-theme = "navy"
 

scripts/sidebar.js → scripts/nav-additions.js

@@ -32,17 +32,37 @@ var updateFunction = function() {
     });
 };
 
-// Populate sidebar on load
 window.addEventListener('load', function() {
-    var pagetoc = document.getElementsByClassName("pagetoc")[0];
-    var elements = document.getElementsByClassName("header");
 
     /* Scroll the page index on the left to the current active page */
     var active = document.querySelector(".chapter li a.active");
     active.scrollIntoView({ behavior: "instant", block: "center", inline: "nearest" });
 
-    // don't show sidebar with only 1 header (or less)
-    if (elements.length <= 1)
+    /* Populate subpage footer */
+
+    /* Get next sibling of active list element
+       then check if it has a nested ol
+       if so, this implies our current active element has nested subpages */
+    var nextListEl = active.parentElement.nextElementSibling;
+    var footer = document.getElementById("subpage-footer");
+    footer.style.display = "none";
+    if (nextListEl != null)
+    {
+        console.log(nextListEl);
+        var list = nextListEl.querySelector(".section")
+        if (list != null)
+        {
+            footer.style.display = "block";
+            footer.appendChild(list.cloneNode(true));
+        }
+    }
+
+    /* Populate pagetoc sidebar */
+
+    var pagetoc = document.getElementsByClassName("pagetoc")[0];
+    var elements = document.getElementsByClassName("header");
+    // don't show pagetoc sidebar with less than 2 headers
+    if (elements.length < 2)
         return;
 
     Array.prototype.forEach.call(elements, function(el) {

theme/index.hbs

@@ -191,6 +191,10 @@
 
                         <div style="clear: both"></div>
                     </nav> -->
+
+                    <footer id="subpage-footer">
+                        <p>Subpages</p>
+                    </footer>
                 </div>
             </div>
 

theme/sidebar-style.css → theme/nav-style.css

@@ -1,3 +1,5 @@
+/* Styling for the subpage footer & sidebar toc */
+
 @media only screen and (max-width:1365px) {
     .sidetoc {
         display: none;
@@ -41,8 +43,42 @@
     }
 }
 
+#subpage-footer {
+    max-width: 400px;
+    margin-top: 100px;
+    margin-left: 150px;
+    color: var(--fg) !important;
+    display: block;
+}
+
+#subpage-footer > p {
+    line-height: 1.0em;
+}
+
+#subpage-footer > ol {
+    list-style: none outside none;
+    padding-left: 20px;
+    line-height: 1.6em;
+    border-top: 1px solid var(--sidebar-bg);
+    padding-top: 10px;
+}
+
+#subpage-footer ol > li.chapter-item {
+    display: flex;
+}
+
+#subpage-footer a.toggle {
+    display: block;
+    margin-left: auto;
+    padding-left: 20px;
+    opacity: 0.68;
+}
+
 @media print {
     .sidetoc {
         display: none;
     }
+    #subpage-footer {
+        display: none;
+    }
 }

theme/ss14.css

@@ -7,6 +7,7 @@
     --sidebar-active: #e23229;
 }
 
+/* title text on top of every page */
 .menu-title {
     color: #e23229;
 }