From 0e88f28f4a1a04618422143325badceae5c2078d Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sun, 6 Nov 2022 22:38:31 +0800
Subject: [PATCH 1/4] docs: make toc sticky on desktop

---
 docs/src/assets/js/main.js               | 41 +++++++++++++++++++++++-
 docs/src/assets/scss/components/toc.scss | 22 +++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/docs/src/assets/js/main.js b/docs/src/assets/js/main.js
index 28ec0e1306b..d5fba0bb307 100644
--- a/docs/src/assets/js/main.js
+++ b/docs/src/assets/js/main.js
@@ -1,3 +1,42 @@
+(function () {
+    // for sticky table of contents
+    const tocBody = document.querySelector(".docs-aside #js-toc-panel");
+    const options = {
+        root: null,
+        rootMargin: `0px 0px -90% 0px`,
+        threshold: 1.0,
+    };
+    const activeClassName = "active";
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                const activeAnchor = tocBody.querySelector(
+                    `a.${activeClassName}`
+                );
+                if (activeAnchor) {
+                    activeAnchor.parentNode.classList.remove(activeClassName);
+                    activeAnchor.classList.remove(activeClassName);
+                }
+
+                const nextActiveAnchor = tocBody.querySelector(
+                    `a[href="#${entry.target.id}"]`
+                );
+                if (nextActiveAnchor) {
+                    nextActiveAnchor.parentNode.classList.add(activeClassName);
+                    nextActiveAnchor.classList.add(activeClassName);
+                }
+            }
+        });
+    }, options);
+    if (window.matchMedia("(min-width: 1400px)")) {
+        document
+            .querySelectorAll(
+                "#main > div > h2[id], #main > div > h3[id], #main > div > h4[id]" // only h2, h3, h4 are shown in toc
+            )
+            .forEach((el) => observer.observe(el));
+    }
+})();
+
 (function() {
     var toc_trigger = document.getElementById("js-toc-label"),
         toc = document.getElementById("js-toc-panel"),
@@ -279,4 +318,4 @@ if (index) {
 
 document.addEventListener("DOMContentLoaded", () => {
     anchors.add(".docs-content h2:not(.c-toc__label), .docs-content h3, .docs-content h4");
-});
\ No newline at end of file
+});
diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss
index 5e2e66a166a..51e1c7d10ea 100644
--- a/docs/src/assets/scss/components/toc.scss
+++ b/docs/src/assets/scss/components/toc.scss
@@ -18,6 +18,28 @@
     }
 }
 
+.docs-aside {
+    // for sticky table of contents in sidebar
+    .docs-toc.c-toc {
+        @media all and (min-width: 1400px) {
+            position: sticky;
+            top: 20px;
+            overflow-y: auto; // show scrollbar when toc is higher than viewport
+            padding-right: 5px; // push scrollbar away from content
+            max-height: calc(100vh - 32px); // minus element's margin-top
+            a.active {
+                color: var(--link-color);
+                font-weight: 500;
+            }
+        }
+    }
+    .c-toc ol li.active::before {
+        @media all and (min-width: 1400px) {
+            color: var(--link-color);
+        }
+    }
+}
+
 .c-toc {
     ol {
         margin: 0;

From d6603361da071c6e8f1063545a595a6b546ef955 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sun, 6 Nov 2022 22:42:32 +0800
Subject: [PATCH 2/4] docs: fix bug

---
 docs/src/assets/js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/assets/js/main.js b/docs/src/assets/js/main.js
index d5fba0bb307..bf3268266f4 100644
--- a/docs/src/assets/js/main.js
+++ b/docs/src/assets/js/main.js
@@ -28,7 +28,7 @@
             }
         });
     }, options);
-    if (window.matchMedia("(min-width: 1400px)")) {
+    if (window.matchMedia("(min-width: 1400px)").matches) {
         document
             .querySelectorAll(
                 "#main > div > h2[id], #main > div > h3[id], #main > div > h4[id]" // only h2, h3, h4 are shown in toc

From 61893ee3f3daa00e8b77e2c309e354f0bc509516 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sun, 6 Nov 2022 22:55:23 +0800
Subject: [PATCH 3/4] docs: fix css style

---
 docs/src/assets/scss/components/toc.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss
index 51e1c7d10ea..417e96d2f0a 100644
--- a/docs/src/assets/scss/components/toc.scss
+++ b/docs/src/assets/scss/components/toc.scss
@@ -33,6 +33,7 @@
             }
         }
     }
+
     .c-toc ol li.active::before {
         @media all and (min-width: 1400px) {
             color: var(--link-color);

From d348e02eaceb2c5dec7b0361ef60c2b799423e2e Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Tue, 8 Nov 2022 20:38:52 +0800
Subject: [PATCH 4/4] docs: fix scrollbar style for dark mode

---
 docs/src/assets/scss/components/toc.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss
index 417e96d2f0a..74da310b325 100644
--- a/docs/src/assets/scss/components/toc.scss
+++ b/docs/src/assets/scss/components/toc.scss
@@ -21,6 +21,7 @@
 .docs-aside {
     // for sticky table of contents in sidebar
     .docs-toc.c-toc {
+        background-color: var(--body-background-color);
         @media all and (min-width: 1400px) {
             position: sticky;
             top: 20px;