feat: add mobile view toc

_includes/overlay.html

@@ -0,0 +1 @@
+<dialog id="overlay"></dialog>

_includes/post-topbar.html

@@ -0,0 +1,19 @@
+<!-- Post secondary topbar -->
+
+<div id="post-topbar" class="d-flex flex-row justify-content-between">
+  <!-- category -->
+  <span id="post-topbar-category">
+    {% if page.categories.size > 0 %}
+      {{ page.categories | first }}
+      {% if page.categories.size > 1 %}
+        {{ '/' | append: ' ' | append: page.categories[1] }}
+      {% endif %}
+    {% endif %}
+  </span>
+  <!-- title -->
+  <span id="post-topbar-title" class="d-none">{{ page.title }}</span>
+  <!-- toc trigger -->
+  <button id="overlay-trigger" type="button" class="btn btn-link">
+    <i class="fas fa-list fa-fw"></i>
+  </button>
+</div>

_javascript/modules/components/post-topbar.js

@@ -0,0 +1,70 @@
+/*
+ * Post topbar functions
+ */
+
+const stickyTopbar = document.getElementById('post-topbar');
+const topbarCategory = document.getElementById('post-topbar-category');
+const topbarTitle = document.getElementById('post-topbar-title');
+
+const overlay = document.getElementById('overlay');
+const overlayTrigger = document.getElementById('overlay-trigger');
+
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
+
+function initPostTopbar() {
+  window.addEventListener('scroll', () => {
+    if (window.scrollY >= stickyTopbar.offsetTop) {
+      topbarCategory.classList.add(UNLOADED);
+      topbarTitle.classList.remove(UNLOADED);
+    } else {
+      topbarCategory.classList.remove(UNLOADED);
+      topbarTitle.classList.add(UNLOADED);
+    }
+  });
+}
+
+class Overlay {
+  static show() {
+    document.body.classList.add('noscroll');
+    // overlay.classList.add(LOADED);
+    overlay.showModal();
+  }
+
+  static hide() {
+    document.body.classList.remove('noscroll');
+    // overlay.classList.remove(LOADED);
+    overlay.close();
+  }
+
+  static addTocToOverlay() {
+    const toc = document.getElementById('toc-wrapper');
+    const clonedToc = toc.cloneNode(true);
+    this.removeContent();
+    overlay.appendChild(clonedToc);
+  }
+
+  static removeContent() {
+    while (overlay.firstChild) {
+      overlay.removeChild(overlay.firstChild);
+    }
+  }
+
+  static init() {
+    overlay?.addEventListener('click', () => {
+      this.removeContent();
+      this.hide();
+    });
+
+    overlayTrigger?.addEventListener('click', () => {
+      this.addTocToOverlay();
+      this.show();
+    });
+  }
+}
+
+export { initPostTopbar };
+
+export function initOverlay() {
+  Overlay.init();
+}

_javascript/modules/layouts.js

@@ -1,3 +1,4 @@
 export { basic } from './layouts/basic';
 export { initSidebar } from './layouts/sidebar';
 export { initTopbar } from './layouts/topbar';
+export { initPostTopbar, initOverlay } from './components/post-topbar';

_javascript/post.js

@@ -1,4 +1,10 @@
-import { basic, initSidebar, initTopbar } from './modules/layouts';
+import {
+  basic,
+  initOverlay,
+  initSidebar,
+  initTopbar,
+  initPostTopbar
+} from './modules/layouts';
 import {
   loadImg,
   imgPopup,
@@ -14,4 +20,6 @@ initSidebar();
 initLocaleDatetime();
 initClipboard();
 initTopbar();
+initPostTopbar();
+initOverlay();
 basic();

_layouts/post.html

@@ -8,9 +8,10 @@
   - post-nav
   - comments
 ---
-
 {% include lang.html %}
 
+{% include post-topbar.html %}
+
 <article class="px-1">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
@@ -150,3 +151,5 @@ <h1 data-toc-skip>{{ page.title }}</h1>
   </div>
   <!-- div.post-tail-wrapper -->
 </article>
+
+{% include overlay.html %}

_sass/addon/commons.scss

@@ -35,6 +35,10 @@ body {
   font-family: $font-family-base;
 }
 
+.noscroll {
+  overflow: hidden;
+}
+
 /* --- Typography --- */
 
 @for $i from 1 through 5 {

_sass/layout/post.scss

@@ -14,6 +14,28 @@
   padding-right: $pr;
 }
 
+#post-topbar {
+  position: sticky;
+  top: 0;
+  align-items: baseline;
+  background: var(--main-bg);
+  z-index: 1;
+  margin: 0 -0.75rem;
+
+  span {
+    padding: 0 0.75rem;
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    white-space: nowrap;
+  }
+
+  button i {
+    color: #999999;
+  }
+}
+
 header {
   .post-desc {
     @extend %heading;
@@ -342,6 +364,26 @@ header {
   }
 }
 
+#overlay {
+  border-color: var(--btn-border-color);
+  border-width: 1px;
+  border-radius: 0.5rem;
+  height: 80%;
+
+  #toc-wrapper {
+    margin-top: 2rem;
+    top: unset;
+  }
+
+  h2 {
+    margin-top: unset;
+  }
+}
+
+dialog::backdrop {
+  backdrop-filter: blur(5px);
+}
+
 @media all and (max-width: 576px) {
   .post-tail-bottom {
     flex-wrap: wrap-reverse !important;
@@ -368,3 +410,9 @@ header {
     margin-right: -0.5rem;
   }
 }
+
+@media all and (min-width: 1200px) {
+  #post-topbar {
+    display: none !important;
+  }
+}