added navigation to the changelog and blog posts

web/_includes/blognav.html

@@ -5,3 +5,4 @@
 {% if page.next %}
     <a class="nav-item nav-link" href="{{ page.next.url }}">⏭️ Next Post</a>
 {% endif %}
+{% include tocnavitem.html headers="h1, h2, h3, h4, h5, h6" %}

web/_includes/changelognav.html

@@ -0,0 +1,2 @@
+<a class="nav-item nav-link" href="../../">🏠 Home</a>
+{% include tocnavitem.html headers="h2" %}

web/_includes/navbar.html

@@ -39,10 +39,6 @@
                     });
                 </script>
             </span>
-
-            <script>
-                $(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
-            </script>
         </div>
     </div>
 </nav>

web/_includes/tocnavitem.html

@@ -0,0 +1,17 @@
+<div class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" type="button" data-toggle="dropdown">🧭 Navigation</a>
+    <div class="dropdown-menu">
+        <div id="navigator-content" style="height: auto; max-height: 50vh; overflow-y: scroll;"></div>
+        <script>
+            $(() => $("{{ include.headers }}").each((i, h) => {
+                console.log(h);
+                let offset = `${0.5 + Number(h.nodeName.substring(1)) - 1}rem`;
+                console.log(offset);
+                $("#navigator-content").append(`
+                    <a class="nav-item nav-link dropdown-item-text" href="#${h.id}" style="padding-left: ${offset}; white-space: nowrap;">
+                        ${h.innerText.trim()}
+                    </a>`);
+            }));
+        </script>
+    </div>
+</div>

web/changelog.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-nav: basicnav.html
+nav: changelognav.html
 title: Tiny Life Changelog
 summary: The full changelog for Tiny Life
 ---

web/style.css

@@ -256,7 +256,8 @@ h1:hover .anchor-heading, h2:hover .anchor-heading, h3:hover .anchor-heading, h4
     visibility: visible;
 }
 
-body.dark-mode {
+body.dark-mode,
+body.dark-mode .dropdown-menu {
     color: #d8d8d8;
     background-color: #1b1b1b;
 }