feat: show toc on mobile screens

_includes/overlay.html

@@ -0,0 +1,11 @@
+<dialog id="overlay">
+  <div class="d-flex flex-column">
+    <div class="d-flex flex-row align-items-center justify-content-between">
+      <h2>{{- site.data.locales[include.lang].panel.toc -}}</h2>
+      <button id="overlay-close" type="button" class="btn btn-link">
+        <i class="fas fa-close fa-fw"></i>
+      </button>
+    </div>
+    <div id="overlay-content"></div>
+  </div>
+</dialog>

_includes/post-topbar.html

@@ -0,0 +1,30 @@
+<!-- Post secondary topbar -->
+
+{% 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 %}
+  <div id="post-topbar" class="d-flex flex-row align-items-baseline 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 %}
+      {% else %}
+        {{- site.data.locales[include.lang].panel.toc -}}
+      {% 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>
+{% endif %}

_javascript/modules/components/post-topbar.js

@@ -0,0 +1,74 @@
+/*
+ * Post topbar functions
+ */
+
+const postTitle = document.querySelector('article header');
+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 overlayContent = document.getElementById('overlay-content');
+const overlayClose = document.getElementById('overlay-close');
+
+const UNLOADED = 'd-none';
+
+function initPostTopbar() {
+  window.addEventListener('scroll', () => {
+    if (window.scrollY >= postTitle?.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.showModal();
+  }
+
+  static hide() {
+    document.body.classList.remove('noscroll');
+    overlay.close();
+  }
+
+  static addTocToOverlay() {
+    const toc = document.getElementById('toc-wrapper');
+    const clonedToc = toc.cloneNode(true);
+    this.removeContent();
+    overlayContent.appendChild(clonedToc);
+  }
+
+  static removeContent() {
+    while (overlayContent.firstChild) {
+      overlayContent.removeChild(overlayContent.firstChild);
+    }
+  }
+
+  static init() {
+    overlay?.addEventListener('click', () => {
+      this.hide();
+      this.removeContent();
+    });
+
+    overlayTrigger?.addEventListener('click', () => {
+      this.addTocToOverlay();
+      this.show();
+    });
+
+    overlayClose?.addEventListener('click', () => {
+      this.hide();
+      this.removeContent();
+    });
+  }
+}
+
+export { initPostTopbar };
+
+export function initOverlay() {
+  Overlay.init();
+}

_javascript/modules/components/toc.js

@@ -10,6 +10,6 @@ export function toc() {
       scrollSmooth: false
     });
 
-    document.getElementById('toc-wrapper').classList.remove('d-none');
+    document.getElementById('toc-wrapper')?.classList.remove('d-none');
   }
 }

_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 lang=lang %}
+
 <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 lang=lang %}

_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,27 @@
   padding-right: $pr;
 }
 
+#post-topbar {
+  position: sticky;
+  top: 0;
+  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 +363,35 @@ header {
   }
 }
 
+#overlay {
+  border-color: var(--btn-border-color);
+  border-width: 1px;
+  border-radius: 0.5rem;
+  height: 80%;
+
+  h2 {
+    margin: unset;
+  }
+
+  button i {
+    color: #999999;
+  }
+
+  #toc-wrapper {
+    margin-top: 2rem;
+    top: unset;
+
+    h2 {
+      margin-top: unset;
+      display: none;
+    }
+  }
+}
+
+dialog::backdrop {
+  backdrop-filter: blur(5px);
+}
+
 @media all and (max-width: 576px) {
   .post-tail-bottom {
     flex-wrap: wrap-reverse !important;
@@ -368,3 +418,9 @@ header {
     margin-right: -0.5rem;
   }
 }
+
+@media all and (min-width: 1200px) {
+  #post-topbar {
+    display: none !important;
+  }
+}