From a287d11246cc0c18a9bf4435bddffc9e163e64fd Mon Sep 17 00:00:00 2001
From: meleu <meleu.dev@gmail.com>
Date: Sun, 3 Apr 2022 22:12:55 -0300
Subject: [PATCH] add a collapsible ToC

---
 assets/styles/base.scss      | 17 +++++++++++++++++
 data/config.yaml             |  1 +
 layouts/_default/single.html |  6 ++++--
 layouts/index.html           |  6 ++++--
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index aa172d0..38c1f53 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -23,6 +23,23 @@ p, ul, text {
   padding: revert;
 }
 
+.mainTOC {
+  background: var(--lightgray);
+  border-radius: 8px;
+  padding: 0.8em;
+}
+
+.mainTOC details summary {
+  cursor: zoom-in;
+  font-family: Inter;
+  color: var(--dark);
+  font-weight: 700;
+}
+
+.mainTOC details[open] summary {
+    cursor: zoom-out;
+}
+
 #TableOfContents > ol {
   counter-reset: section;
   margin-left: 0em;
diff --git a/data/config.yaml b/data/config.yaml
index c59c0e0..e33c329 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -1,5 +1,6 @@
 name: Jacky Zhao
 enableToc: true
+openToc: false
 enableLinkPreview: true
 enableLatex: true
 description:
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3423a0c..02965f9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -24,8 +24,10 @@
       </ul>
       {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
       <aside class="mainTOC">
-          <h3>Table of Contents</h3>
-          {{ .TableOfContents }}
+          <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+            <summary>Table of Contents</summary>
+            {{ .TableOfContents }}
+          </details>
       </aside>
       {{end}}
       {{partial "textprocessing.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 6fb75f9..466a05a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,8 +15,10 @@
     <article>
         {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
         <aside class="mainTOC">
-            <h3>Table of Contents</h3>
-            {{ .TableOfContents }}
+            <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+                <summary>Table of Contents</summary>
+                {{ .TableOfContents }}
+            </details>
         </aside>
         {{end}}
         {{partial "textprocessing.html" . }}