[new feature] toggle sidebar

#15

assets/sass/components/_breadcrumb.scss

@@ -14,8 +14,6 @@
     padding: 0.5rem 0;
   }
 
-  @include truncate($grid-body-width);
-
   ol {
     @include flexbox();
     @include align-items(center);
@@ -25,6 +23,8 @@
   li {
     display: inline;
     font-size: 0.9rem;
+
+    @include truncate(300px);
     
     a {
       @include themify($themes) {

assets/sass/components/_switch.scss

@@ -0,0 +1,63 @@
+/* The switch - the box around the slider */
+.switch {
+  position: absolute;
+  right: -2rem;
+  top: 1.75rem;
+  display: inline-block;
+  width: 30px;
+  height: 16px;
+  z-index: z('gtt');
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  -webkit-transition: .2s;
+  transition: .2s;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    -webkit-transition: .2s;
+    transition: .2s;
+  }
+
+  &__icon {
+    padding: 0.5rem;
+  }
+}
+
+// input:checked + .slider {
+//   @include themify($themes) {
+//     background-color: transparent;
+//   }
+// }
+
+// input:focus + .slider {
+//   @include themify($themes) {
+//     background-color: transparent;
+//   }
+// }
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}

assets/sass/components/_toc.scss

@@ -5,7 +5,7 @@
   padding: 0.5rem;
   margin: 0.5rem;
   margin-top: 0;
-  padding-top: 0.85rem;
+  padding-top: 1.25rem;
   height: calc(100vh - $grid-nav-height);
   overflow-y: auto;
   font-size: 0.85rem;
@@ -21,6 +21,7 @@
     font-size: 1rem;
     margin-top: 0.65rem;
     margin-bottom: 1rem;
+    margin-left: 1.25rem;
     padding-bottom: 0.5rem;
 
     @include themify($themes) {

assets/sass/layout/_grid.scss

@@ -21,7 +21,7 @@
     @include justify-content(center);
     @include themify($themes) {
       color: themed('body-color');
-  }  
+    }
 }
 
 .nav { grid-area: 1 / 1 / 2 / 2; }

assets/sass/main.scss

@@ -46,6 +46,7 @@ $light-nav-icon-color: {{ .Site.Data.color.light_nav_icon_color }};
 @import 'components/tag';
 @import 'components/section';
 @import 'components/lib';
+@import 'components/switch';
 
 @import 'layout/grid';
 @import 'layout/footer';

assets/sass/pages/_list.scss

@@ -5,11 +5,7 @@
   @include flex-direction(column);
   @include themify($themes) {
     background-color: themed('body-background-color');
-  }
-}
 
-#list-menu {
-  @include themify($themes) {
     &[data-dir="ltr"] {
       border-right: 1px solid themed('border-line-color');
     }
@@ -20,18 +16,24 @@
   }
 }
 
-#list-side {
+#list-menu {
+  position: relative;
+  
   @include themify($themes) {
     &[data-dir="ltr"] {
-      border-left: 1px solid themed('border-line-color');
+      border-right: 1px solid themed('border-line-color');
     }
 
     &[data-dir="rtl"] {
-      border-right: 1px solid themed('border-line-color');
+      border-left: 1px solid themed('border-line-color');
     }
   }
 }
 
+#list-side {
+  position: relative;
+}
+
 .list-section {
   &__item {
     margin: auto;

exampleSite/config/_default/params.toml

@@ -7,6 +7,8 @@ themeOptions = ["light", "dark"]
 
 useFaviconGenerator = true # https://www.favicon-generator.org/
 
+enableTocSwitch = true
+enableLandingBackground = false
 enableSearch = true
 enableSearchHighlight = true
 enableLangChange = true

exampleSite/content/en/docs/depth1/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Depth 1"
+date: 2020-02-28T10:08:56+09:00
+description: 
+draft: false
+collapsible: true
+weight: 1
+---

exampleSite/content/en/docs/depth1/depth2/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Depth 2"
+date: 2020-02-28T10:08:56+09:00
+description: 
+draft: false
+collapsible: true
+weight: 1
+---

exampleSite/content/en/docs/depth1/depth2/depth3/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Depth 3"
+date: 2020-02-28T10:08:56+09:00
+description: 
+draft: false
+collapsible: true
+weight: 1
+---

exampleSite/content/en/docs/depth1/depth2/depth3/test3.md

@@ -0,0 +1,8 @@
+---
+title: "Test 3"
+date: 2020-01-30T00:38:25+09:00
+description: Test description
+draft: false
+weight: 1
+enableToc: false
+---

exampleSite/content/en/docs/depth1/depth2/test2.md

@@ -0,0 +1,8 @@
+---
+title: "Test 2"
+date: 2020-01-30T00:38:25+09:00
+description: Test description
+draft: false
+weight: 1
+enableToc: false
+---

exampleSite/content/en/docs/depth1/test1.md

@@ -0,0 +1,8 @@
+---
+title: "Test 1"
+date: 2020-01-30T00:38:25+09:00
+description: Test description
+draft: false
+weight: 1
+enableToc: false
+---

exampleSite/content/en/docs/depth1/ttttest.md

@@ -0,0 +1,8 @@
+---
+title: "ttttest"
+date: 2020-01-30T00:38:25+09:00
+description: Test description
+draft: false
+weight: 2
+enableToc: false
+---

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');

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>

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 }}

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) }}

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" . }}

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 }}