From ec4dbfd1e8c72c7d70f7f3a6e53167a772880057 Mon Sep 17 00:00:00 2001
From: rushii <33725716+rushiiMachine@users.noreply.github.com>
Date: Fri, 8 Aug 2025 20:14:35 -0700
Subject: [PATCH] fix(TOC): hide active overlay when no sections active (#586)

* fix(TOC): hide active overlay when none active

* fix indentation
---
 .gitignore                      |  4 ++++
 src/components/widget/TOC.astro | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index dcac261..b2b378e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,7 @@ pnpm-debug.log*
 package-lock.json
 bun.lockb
 yarn.lock
+
+# ide
+.idea
+*.iml
diff --git a/src/components/widget/TOC.astro b/src/components/widget/TOC.astro
index 608de57..6cb2fab 100644
--- a/src/components/widget/TOC.astro
+++ b/src/components/widget/TOC.astro
@@ -55,7 +55,7 @@ const maxLevel = siteConfig.toc.depth;
                 }]}>{removeTailingHash(heading.text)}</div>
             </a>
     )}
-    <div id="active-indicator" class:list={[{'hidden': headings.length == 0}, "-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 rounded-xl transition-all " +
+    <div id="active-indicator" style="opacity: 0" class:list={[{'hidden': headings.length == 0}, "-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 rounded-xl transition-all " +
         "group-hover:bg-transparent border-2 border-[var(--toc-btn-hover)] group-hover:border-[var(--toc-btn-active)] border-dashed"]}></div>
 </table-of-contents>}
 
@@ -97,7 +97,7 @@ class TableOfContents extends HTMLElement {
 
     toggleActiveHeading = () => {
         let i = this.active.length - 1;
-        let min = this.active.length - 1, max = 0;
+        let min = this.active.length - 1, max = -1;
         while (i >= 0 && !this.active[i]) {
             this.tocEntries[i].classList.remove(this.visibleClass);
             i--;
@@ -112,11 +112,15 @@ class TableOfContents extends HTMLElement {
             this.tocEntries[i].classList.remove(this.visibleClass);
             i--;
         }
-        let parentOffset = this.tocEl?.getBoundingClientRect().top || 0;
-        let scrollOffset = this.tocEl?.scrollTop || 0;
-        let top = this.tocEntries[min].getBoundingClientRect().top - parentOffset + scrollOffset;
-        let bottom = this.tocEntries[max].getBoundingClientRect().bottom - parentOffset + scrollOffset;
-        this.activeIndicator?.setAttribute("style", `top: ${top}px; height: ${bottom - top}px`);
+        if (min > max) {
+            this.activeIndicator?.setAttribute("style", `opacity: 0`);
+        } else {
+            let parentOffset = this.tocEl?.getBoundingClientRect().top || 0;
+            let scrollOffset = this.tocEl?.scrollTop || 0;
+            let top = this.tocEntries[min].getBoundingClientRect().top - parentOffset + scrollOffset;
+            let bottom = this.tocEntries[max].getBoundingClientRect().bottom - parentOffset + scrollOffset;
+            this.activeIndicator?.setAttribute("style", `top: ${top}px; height: ${bottom - top}px`);
+        }
     };
 
     scrollToActiveHeading = () => {