feat: show toc in mobile view

_includes/sidebar.html

@@ -40,6 +40,8 @@
     </ul>
   </nav>
 
+  {% include toc-leftbar.html lang=lang %}
+
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
       <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">

_includes/toc-leftbar.html

@@ -0,0 +1,14 @@
+{% assign enable_toc = false %}
+{% if site.toc and page.toc %}
+  {% if page.content contains '<h2' or page.content contains '<h3' %}
+    {% assign enable_toc = true %}
+  {% endif %}
+{% endif %}
+
+{% if enable_toc %}
+  <section id="toc-leftbar-wrapper" class="d-none w-100 ps-0" style="flex-grow: 12; margin-bottom: 2rem;">
+    <hr style="width: 90%; margin: 2rem auto;">
+    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+    <nav id="toc-leftbar"></nav>
+  </section>
+{% endif %}

_includes/toc.html

@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="d-none ps-0 pe-4">
+  <section id="toc-rightbar-wrapper" class="d-none ps-0 pe-4">
     <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
-    <nav id="toc"></nav>
+    <nav id="toc-rightbar"></nav>
   </section>
 {% endif %}

_javascript/modules/components/toc.js

@@ -1,15 +1,33 @@
-export function toc() {
+function tocRightbar() {
   if (document.querySelector('main h2, main h3')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
-      tocSelector: '#toc',
+      tocSelector: '#toc-rightbar',
       contentSelector: '.content',
       ignoreSelector: '[data-toc-skip]',
       headingSelector: 'h2, h3, h4',
       orderedList: false,
       scrollSmooth: false
     });
 
-    document.getElementById('toc-wrapper').classList.remove('d-none');
+    document.getElementById('toc-rightbar-wrapper').classList.remove('d-none');
   }
 }
+
+function tocLeftbar() {
+  if (document.querySelector('main h2, main h3')) {
+    // see: https://github.com/tscanlin/tocbot#usage
+    tocbot.init({
+      tocSelector: '#toc-leftbar',
+      contentSelector: '.content',
+      ignoreSelector: '[data-toc-skip]',
+      headingSelector: 'h2, h3, h4',
+      orderedList: false,
+      scrollSmooth: false
+    });
+
+    document.getElementById('toc-leftbar-wrapper').classList.remove('d-none');
+  }
+}
+
+export { tocLeftbar, tocRightbar };

_javascript/modules/plugins.js

@@ -3,4 +3,4 @@ export { initClipboard } from './components/clipboard';
 export { loadImg } from './components/img-loading';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
-export { toc } from './components/toc';
+export { tocLeftbar, tocRightbar } from './components/toc';

_javascript/post.js

@@ -4,11 +4,13 @@ import {
   imgPopup,
   initLocaleDatetime,
   initClipboard,
-  toc
+  tocLeftbar,
+  tocRightbar
 } from './modules/plugins';
 
 loadImg();
-toc();
+tocLeftbar();
+tocRightbar();
 imgPopup();
 initSidebar();
 initLocaleDatetime();

_sass/addon/commons.scss

@@ -1320,6 +1320,8 @@ search {
   #topbar-wrapper {
     @include slide(top 0.2s ease);
 
+    position: sticky;
+    top: 0;
     left: 0;
   }
 

_sass/layout/post.scss

@@ -228,7 +228,7 @@ header {
   }
 }
 
-#toc-wrapper {
+#toc-rightbar-wrapper {
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
@@ -290,6 +290,69 @@ header {
   }
 }
 
+#toc-leftbar-wrapper {
+  border-left: 1px solid rgba(158, 158, 158, 0.17);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 4rem;
+  transition: top 0.2s ease-in-out;
+  -webkit-animation: fade-up 0.8s;
+  animation: fade-up 0.8s;
+
+  ul {
+    list-style: none;
+    font-size: 0.85rem;
+    line-height: 1.25;
+    padding-left: 0;
+    margin-bottom: unset;
+
+    li {
+      &:not(:last-child) {
+        margin: 0.4rem 0;
+      }
+
+      a {
+        padding: 0.2rem 0 0.2rem 1.25rem;
+      }
+    }
+
+    /* Overwrite TOC plugin style */
+
+    .toc-link {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        color: var(--toc-highlight);
+        text-decoration: none;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .is-active-link {
+      color: var(--toc-highlight) !important;
+      font-weight: 600;
+
+      &::before {
+        display: inline-block;
+        width: 1px;
+        left: -1px;
+        height: 1.25rem;
+        background-color: var(--toc-highlight) !important;
+      }
+    }
+
+    ul {
+      padding-left: 0.75rem;
+    }
+  }
+}
+
 /* --- Related Posts --- */
 
 #related-posts {
@@ -368,3 +431,9 @@ header {
     margin-right: -0.5rem;
   }
 }
+
+@media all and (min-width: 849px) {
+  #toc-leftbar-wrapper {
+    display: none;
+  }
+}