Navigation filter

src/_layouts/default.html

@@ -55,6 +55,7 @@
   <div class="container-fluid">
     <div class="row">
       <nav class="col-12 col-md-3 col-xl-2 d-none d-md-block bg-light sidebar-sticky">
+        <input type="text" name="navigation-filter" id="navigation-filter">
         <div id="navigation" class="sidebar-content">
         </div>
       </nav>
@@ -78,6 +79,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.3.0/anchor.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
   <script src="/assets/js/app.js"></script>
+  <script src="/assets/js/navigation.js"></script>
   <script src="/assets/js/search.js"></script>
 </body>
 </html>

src/assets/js/app.js

@@ -5,15 +5,4 @@ $(() => {
 
   // highlight.js
   hljs.highlightAll();
-
-  $("#navigation").load(`${config.rootPath}navigation.html`, function() {
-    $(".sidebar-sticky .icon").on("click", function (e) {
-      $(this).siblings("ul").toggle();
-      this.classList.toggle("icon-opened");
-    });
-    $(`.sidebar-content a[href='${window.location.pathname}']`)
-      .attr("class", "active-link")
-      .parents('ul')
-      .show();
-  })
 });

src/assets/js/navigation.js

@@ -0,0 +1,16 @@
+$(() => {
+  $("#navigation").load(`${config.rootPath}navigation.html`, () => {
+    // Toggle child lists
+    $(".sidebar-sticky .icon").on("click", function () {
+      this.classList.toggle("icon-opened");
+      // FIXME: use vanilla JS and CSS instead of jQuery
+      $(this).siblings("ul").toggle(500);
+    });
+
+    // Activate current page
+    $(`.sidebar-content a[href='${window.location.pathname}']`)
+      .attr("class", "active-link")
+      .parents('ul')
+      .show();
+  })
+});