feat: add mobile view toc

cotes2020 · Sep 28, 2024 · 38cb230 · 38cb230
1 parent 93f616b
commit 38cb230
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 5 deletions.
diff --git a/_includes/overlay.html b/_includes/overlay.html
@@ -0,0 +1,3 @@
+<div id="overlay">
+  <div id="overlay-content"></div>
+</div>
diff --git a/_includes/topbar.html b/_includes/topbar.html
@@ -47,6 +47,13 @@
     <div id="topbar-title">
       {% if page.layout == 'home' %}
         {{- site.data.locales[include.lang].title | default: site.title -}}
+      {% elsif page.layout == 'post' and site.toc and page.toc %}
+        <div id="contents-title">
+          Contents
+          <button type="button" id="overlay-trigger" class="btn btn-link">
+            <i class="fas fa-angle-down"></i>
+          </button>
+        </div>
       {% elsif page.collection == 'tabs' or page.layout == 'page' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
         {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}}

diff --git a/_javascript/modules/components/overlay.js b/_javascript/modules/components/overlay.js
@@ -0,0 +1,39 @@
+const body = document.body;
+const overlay = document.getElementById('overlay');
+const overlayContent = document.getElementById('overlay-content');
+const overlayTrigger = document.getElementById('overlay-trigger');
+
+function showOverlay() {
+  body.classList.add('noscroll');
+  overlay.classList.add('d-block');
+}
+
+function hideOverlay() {
+  body.classList.remove('noscroll');
+  overlay.classList.remove('d-block');
+}
+
+function addTocToOverlay() {
+  const toc = document.getElementById('toc-wrapper');
+  const clonedToc = toc.cloneNode(true);
+  clearOverlayContent();
+  overlayContent.appendChild(clonedToc);
+}
+
+function clearOverlayContent() {
+  while (overlayContent.firstChild) {
+    overlayContent.removeChild(overlayContent.firstChild);
+  }
+}
+
+overlay.addEventListener('click', () => {
+  clearOverlayContent();
+  hideOverlay();
+});
+
+overlayTrigger.addEventListener('click', () => {
+  addTocToOverlay();
+  showOverlay();
+});
+
+export { showOverlay, hideOverlay };
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
@@ -1,3 +1,5 @@
+import { showOverlay } from './overlay';
+
 export function toc() {
   if (document.querySelector('main h2, main h3')) {
     // see: https://github.com/tscanlin/tocbot#usage

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,7 +1,6 @@
 ---
 layout: compress
 ---
-
 <!doctype html>
 
 {% include origin-type.html %}
@@ -74,6 +73,8 @@
       {% include_cached notification.html lang=lang %}
     {% endif %}
 
+    {% include overlay.html %}
+
     <!-- JavaScripts -->
     {% include js-selector.html lang=lang %}
 

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -35,6 +35,10 @@ body {
   font-family: $font-family-base;
 }
 
+.noscroll {
+  overflow: hidden;
+}
+
 /* --- Typography --- */
 
 @for $i from 1 through 5 {
@@ -972,6 +976,19 @@ $btn-mb: 0.5rem;
   @include placeholder-focus;
 }
 
+#overlay {
+  position: fixed;
+  overflow-y: scroll;
+  display: none;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.95);
+  z-index: 3;
+  cursor: pointer;
+  padding: 1rem 0;
+}
+
 search {
   display: flex;
   width: 100%;
@@ -988,7 +1005,8 @@ search {
 }
 
 #sidebar-trigger,
-#search-trigger {
+#search-trigger,
+#overlay-trigger {
   display: none;
 }
 
@@ -1094,6 +1112,11 @@ search {
   white-space: nowrap;
 }
 
+#contents-title {
+  display: inline-flex;
+  align-items: baseline;
+}
+
 #mask {
   display: none;
   position: fixed;
@@ -1320,7 +1343,10 @@ search {
   #topbar-wrapper {
     @include slide(top 0.2s ease);
 
+    position: sticky;
+    top: 0;
     left: 0;
+    z-index: 1;
   }
 
   main,
@@ -1330,7 +1356,8 @@ search {
 
   #topbar-title,
   #sidebar-trigger,
-  #search-trigger {
+  #search-trigger,
+  #overlay-trigger {
     display: block;
   }
 
@@ -1368,6 +1395,10 @@ search {
     }
   }
 
+  #overlay {
+    display: none !important;
+  }
+
   #search-hints {
     display: none;
   }

diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
@@ -47,7 +47,7 @@
   --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
-  --topbar-bg: rgb(27, 27, 30, 0.64);
+  --topbar-bg: rgb(27, 27, 30, 1);
   --topbar-text-color: var(--text-color);
   --search-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);

diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
@@ -50,7 +50,7 @@
   --avatar-border-color: white;
 
   /* Topbar */
-  --topbar-bg: rgb(255, 255, 255, 0.7);
+  --topbar-bg: rgb(255, 255, 255, 1);
   --topbar-text-color: rgb(78, 78, 78);
   --search-border-color: rgb(240, 240, 240);
   --search-icon-color: #c2c6cc;