fix: make TOC title and entries visible at the same time (#1711)

When internet connection speeds are poor, there is a chance that the title of the TOC will appear earlier than its entries, causing a visual cutoff.
ryo-wijaya · Apr 28, 2024 · d6461d0 · d6461d0
1 parent 1ca846f
commit d6461d0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/_includes/toc.html b/_includes/toc.html
@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <section id="toc-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>
   </section>
 {% endif %}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
@@ -9,5 +9,7 @@ export function toc() {
       orderedList: false,
       scrollSmooth: false
     });
+
+    document.getElementById('toc-wrapper').classList.remove('d-none');
   }
 }