From 528a25fed51d976d802d4e103bc261efdf68119d Mon Sep 17 00:00:00 2001
From: Junyi Hou <hji200914@gmail.com>
Date: Mon, 4 Mar 2024 19:15:27 +0800
Subject: [PATCH] add: expandable ToC

---
 assets/css/dark.css       |  1 +
 assets/css/light.css      |  2 +-
 assets/css/main.css       | 29 ++++++++++++++++++++++++++++-
 layouts/partials/toc.html | 24 +++++++++++++++++-------
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index b1b339f..40213c5 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -4,6 +4,7 @@
   
 --card-color: #2e2e33;
 --card-border-color: #333333;
+--card-border-radius: 0.5em;
 
 --link-color:#599ada;
 --link-state-color:#ff5858;
diff --git a/assets/css/light.css b/assets/css/light.css
index a992bdf..04de700 100644
--- a/assets/css/light.css
+++ b/assets/css/light.css
@@ -5,6 +5,7 @@
     
     --card-color: #fafafa;
     --card-border-color: #eeeeee;
+    --card-border-radius: 0.5em;
 
     --link-color:#1d60a3;
     --link-state-color:rgb(163, 29, 29);
@@ -15,7 +16,6 @@
 
     --nav-bg-color: #fafafa;
     --nav-link-color: #696969;
-    --nav-border-radius: 10px;
 
     --pre-color: rgb(31, 35, 40);
     --pre-bg-color: rgba(175, 184, 193, 0.2);
diff --git a/assets/css/main.css b/assets/css/main.css
index dd31ad8..ffdb245 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -72,6 +72,33 @@ main {
     outline:none;
 }
 
+/* Table of Contents */
+
+.toc {
+    cursor: zoom-in;
+    display: block;
+    
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding: 0.5em 1em; /* top & bottom, left & right */
+    
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-border-radius);
+    background: var(--card-color);
+
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.toc.expanded {
+    cursor: zoom-out;
+}
+
+.toc .inner {
+    margin: 0px;
+    padding: 0px;
+}
+
 /* Headers */
 h1 {
     font-size: 1.35em;
@@ -257,7 +284,7 @@ header nav:not(:empty){
     text-align: center;
     padding: 0.5em 0;
     border: 1px solid var(--card-border-color);
-    border-radius: var(--nav-border-radius);
+    border-radius: var(--card-border-radius);
 }
 
 header nav a {
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 3a97517..1b4ad79 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,9 +1,19 @@
-{{ $toc := and ($.Site.Params.toc) (ge .WordCount $.Site.Params.tocWordCount) }}
-
-{{ if isset .Params "toc" }}
-{{ $toc = .Params.toc }}
+{{ $toc := and ($.Site.Params.toc) (ge .WordCount $.Site.Params.tocWordCount) }} {{ if isset .Params "toc" }} {{ $toc = .Params.toc }} {{ end }} {{ if $toc }}
+<details class="toc">
+  <summary>Table of Contents</summary>
+  <div class="inner">{{ .TableOfContents }}</div>
+</details>
 {{ end }}
 
-{{ if $toc }}
-{{ .TableOfContents }}
-{{ end }}
\ No newline at end of file
+<script>
+  document.querySelector(".toc").addEventListener("click", function () {
+    event.preventDefault();
+    if (this.open) {
+      this.open = false;
+      this.classList.remove("expanded");
+    } else {
+      this.open = true;
+      this.classList.add("expanded");
+    }
+  });
+</script>