feat: add mobile view toc

cotes2020 · Sep 26, 2024 · 60192ae · 60192ae
1 parent e6b87d2
commit 60192ae
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 6 deletions.
diff --git a/_includes/overlay.html b/_includes/overlay.html
@@ -0,0 +1 @@
+<div id="overlay"></div>
diff --git a/_includes/topbar.html b/_includes/topbar.html
@@ -59,6 +59,12 @@
       <i class="fas fa-search fa-fw"></i>
     </button>
 
+    {% if page.layout == 'post' %}
+      <button type="button" id="overlay-trigger" class="btn btn-link">
+        <i class="fas fa-ellipsis-v fa-fw"></i>
+      </button>
+    {% endif %}
+
     <search id="search" class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input

diff --git a/_javascript/modules/components/overlay.js b/_javascript/modules/components/overlay.js
@@ -0,0 +1,22 @@
+function showOverlay() {
+  document.getElementById('overlay').style.display = 'block';
+}
+
+function hideOverlay() {
+  document.getElementById('overlay').style.display = 'none';
+}
+
+const overlay = document.getElementById('overlay');
+const overlayTrigger = document.getElementById('overlay-trigger');
+
+overlay.addEventListener('click', () => {
+  hideOverlay();
+});
+
+overlayTrigger.addEventListener('click', () => {
+  const toc = document.getElementById('toc-wrapper').innerHTML;
+  overlay.innerHTML = toc;
+  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/_layouts/post.html b/_layouts/post.html
@@ -8,7 +8,6 @@
   - post-nav
   - comments
 ---
-
 {% include lang.html %}
 
 <article class="px-1">

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -972,6 +972,19 @@ $btn-mb: 0.5rem;
   @include placeholder-focus;
 }
 
+#overlay {
+  position: fixed;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 2;
+  cursor: pointer;
+}
+
 search {
   display: flex;
   width: 100%;
@@ -988,7 +1001,8 @@ search {
 }
 
 #sidebar-trigger,
-#search-trigger {
+#search-trigger,
+#overlay-trigger {
   display: none;
 }
 
@@ -1320,6 +1334,8 @@ search {
   #topbar-wrapper {
     @include slide(top 0.2s ease);
 
+    position: sticky;
+    top: 0;
     left: 0;
   }
 
@@ -1330,7 +1346,8 @@ search {
 
   #topbar-title,
   #sidebar-trigger,
-  #search-trigger {
+  #search-trigger,
+  #overlay-trigger {
     display: block;
   }
 

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;