[new feature] toggle sidebar

#15

6 files changed, 76 insertions, 5 deletions

diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index edf221c..ab93ed7 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -5,10 +5,11 @@
     <nav id="single-menu" class="l" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     </nav>
 
-    <article id="list-main" class="m">
+    <article id="list-main" class="m" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ if $.Param "enableBlogBreadcrumb" }}
         {{ partial "main/component/breadcrumb.html" . }}
       {{ end }}
+      {{ partial "main/component/toggle-sidebar.html" . }}
       {{ partial "main/sections/list-main.html" . }}
       {{ partial "main/component/pagination-single.html" . }}
     </article>
@@ -22,6 +23,7 @@
   </div>
 </div>
 
+{{ partial "script/single-script.html" . }}
 <script>
   var listSide = document.getElementById('list-side');
   var listMain = document.getElementById('list-main');
diff --git a/layouts/partials/main/component/toc.html b/layouts/partials/main/component/toc.html
index 7cf016f..d406f40 100644
--- a/layouts/partials/main/component/toc.html
+++ b/layouts/partials/main/component/toc.html
@@ -1,4 +1,6 @@
 <div class="toc">
   <h6 class="toc__label">{{ i18n "toc-label" }}</h6>
-  {{ .TableOfContents }}
+  <div class="toc__body">
+    {{ .TableOfContents }}
+  </div>
 </div>
\ No newline at end of file
diff --git a/layouts/partials/main/component/toggle-sidebar.html b/layouts/partials/main/component/toggle-sidebar.html
new file mode 100644
index 0000000..93c7078
--- /dev/null
+++ b/layouts/partials/main/component/toggle-sidebar.html
@@ -0,0 +1,13 @@
+{{ if $.Param "enableTocSwitch" }}

+  <label class="switch">

+    <input id="toggle-sidebar" aria-label="Toggle Sidebar Visibility" type="checkbox" checked />

+    <span class="slider">

+      <span class="slider__icon">

+        {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}

+      </span>

+      <span class="slider__icon hide">

+        {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}

+      </span>

+    </span>

+  </label>

+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/main/list.html b/layouts/partials/main/list.html
index 030a59a..3f95241 100644
--- a/layouts/partials/main/list.html
+++ b/layouts/partials/main/list.html
@@ -7,7 +7,7 @@
       {{ end }}
     </nav>
 
-    <article id="list-main" class="m">
+    <article id="list-main" class="m" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
       {{ partial "main/sections/list-main.html" .context }}
       {{ if .section_to_display }}
         {{ partial "main/sections/list-section.html" (dict "section_to_display" .section_to_display) }}
diff --git a/layouts/partials/main/single.html b/layouts/partials/main/single.html
index 9df6675..ef4b1c6 100644
--- a/layouts/partials/main/single.html
+++ b/layouts/partials/main/single.html
@@ -7,7 +7,8 @@
       {{ end }}
     </nav>
 
-    <article id="list-main" class="m">
+    <article id="list-main" class="m" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
+      {{ partial "main/component/toggle-sidebar.html" . }}
       {{ partial "main/sections/list-main.html" . }}
       {{ partial "main/component/pagination-single.html" . }}
       {{ partial "comments/comments.html" . }}
diff --git a/layouts/partials/script/single-script.html b/layouts/partials/script/single-script.html
index 8a79b74..a579a8e 100644
--- a/layouts/partials/script/single-script.html
+++ b/layouts/partials/script/single-script.html
@@ -67,10 +67,63 @@
 {{ if in .Params.Libraries "chart" }}
   <script defer src="{{ $js.chart.url }}" integrity="{{ $js.chart.sri }}" crossorigin="anonymous"></script>
 {{ end }}
-
 <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 }}