add sidebar toggle button to list page

layouts/partials/head/scripts.html

@@ -26,6 +26,60 @@
   var languagedir = JSON.parse({{ $languagedir | jsonify }});
 
   window.onload = function() {
+
+    // ==================== toc visibility ========================
+    var toggleSidebarElem = document.getElementById("toggle-sidebar");
+    var tocBodyElem = document.querySelector('.toc__body');
+    var tocLabelElem = document.querySelector('.toc__label');
+    var listMainElem = document.getElementById('list-main');
+    var listSideElem = document.getElementById('list-side');
+    var sliderIcons = document.querySelectorAll('.slider__icon');
+
+    toggleSidebarElem ?
+      toggleSidebarElem.addEventListener('change', function (e) {
+        if (e.target.checked) {
+          if (tocBodyElem) {
+            fadeIn(tocBodyElem, 200);
+          }
+          if (tocLabelElem) {
+            fadeIn(tocLabelElem, 200);
+          }
+          if (listMainElem && listSideElem) {
+            listMainElem.className = 'm';
+            listSideElem.className = 'r';
+          }
+
+          sliderIcons && sliderIcons.forEach(function (elem) {
+            if (elem.classList.contains('hide')) {
+              elem.classList.remove('hide');
+            } else {
+              elem.classList.add('hide');
+            }
+          });
+
+        } else {
+          if (tocBodyElem) {
+            fadeOut(tocBodyElem, 200);
+          }
+          if (tocLabelElem) {
+            fadeOut(tocLabelElem, 200);
+          }
+          if (listMainElem && listSideElem) {
+            listMainElem.className = 'mr';
+            listSideElem.className = 'hide';
+          }
+
+          sliderIcons && sliderIcons.forEach(function (elem) {
+            if (elem.classList.contains('hide')) {
+              elem.classList.remove('hide');
+            } else {
+              elem.classList.add('hide');
+            }
+          });
+        }
+      }) : null;
+    // ============================================================
+
     // ===================== navbar collapse ======================
     var navCollapseBtn = document.getElementById('navCollapseBtn');
     navCollapseBtn ? navCollapseBtn.addEventListener('click', function(e) {

layouts/partials/main/list.html

@@ -8,6 +8,7 @@
     </nav>
 
     <article id="list-main" class="m" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
+      {{ partial "main/component/toggle-sidebar.html" .context }}
       {{ partial "main/sections/list-main.html" .context }}
       {{ if .section_to_display }}
         {{ partial "main/sections/list-section.html" (dict "section_to_display" .section_to_display) }}

layouts/partials/script/single-script.html

@@ -70,60 +70,6 @@
 <script>
   document.addEventListener('DOMContentLoaded', function () {
     'use strict';
-
-    // ====================== toc visibility =========================
-    var toggleSidebarElem = document.getElementById("toggle-sidebar");
-    var tocBodyElem = document.querySelector('.toc__body');
-    var tocLabelElem = document.querySelector('.toc__label');
-    var listMainElem = document.getElementById('list-main');
-    var listSideElem = document.getElementById('list-side');
-    var sliderIcons = document.querySelectorAll('.slider__icon');
-
-    toggleSidebarElem ?
-      toggleSidebarElem.addEventListener('change', function (e) {
-        if (e.target.checked) {
-          if (tocBodyElem) {
-            fadeIn(tocBodyElem, 200);
-          }
-          if (tocLabelElem) {
-            fadeIn(tocLabelElem, 200);
-          }
-          if (listMainElem && listSideElem) {
-            listMainElem.className = 'm';
-            listSideElem.className = 'r';
-          }
-
-          sliderIcons && sliderIcons.forEach(function(elem) {
-            if (elem.classList.contains('hide')) {
-              elem.classList.remove('hide');
-            } else {
-              elem.classList.add('hide');
-            }
-          });
-
-        } else {
-          if (tocBodyElem) {
-            fadeOut(tocBodyElem, 200);
-          }
-          if (tocLabelElem) {
-            fadeOut(tocLabelElem, 200);
-          }
-          if (listMainElem && listSideElem) {
-            listMainElem.className = 'mr';
-            listSideElem.className = 'hide';
-          }
-
-          sliderIcons && sliderIcons.forEach(function (elem) {
-            if (elem.classList.contains('hide')) {
-              elem.classList.remove('hide');
-            } else {
-              elem.classList.add('hide');
-            }
-          });
-        }
-      }) : null;
-    // =================================================================
-
     
     // ============================ mermaid ============================
     {{ $lib := .Params.libraries }}