Create navigation.js

Author: toshimaru

src/_layouts/default.html

@@ -78,6 +78,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,19 +5,4 @@ $(() => {
 
   // highlight.js
   hljs.highlightAll();
-
-  $("#navigation").load(`${config.rootPath}navigation.html`, () => {
-    // Toggle child lists
-    $(".sidebar-sticky .icon").on("click", function () {
-      // FIXME: use vanilla JS and CSS instead of jQuery
-      $(this).siblings("ul").toggle(500);
-      this.classList.toggle("icon-opened");
-    });
-
-    // Activate current page
-    $(`.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();
+  })
+});