From 2041b233e4f3dcfc59f2f8d12a01b8e39ecfe175 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 22 Nov 2024 01:55:19 +0800
Subject: [PATCH 1/2] Use calc-size in `.active > .nav-child`

---
 .../_common/outline/sidebar/sidebar-toc.styl   |  8 +++-----
 source/js/utils.js                             | 18 +-----------------
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/source/css/_common/outline/sidebar/sidebar-toc.styl b/source/css/_common/outline/sidebar/sidebar-toc.styl
index 253191dc3..efeca297d 100644
--- a/source/css/_common/outline/sidebar/sidebar-toc.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toc.styl
@@ -34,19 +34,17 @@ if (hexo-config('toc.enable')) {
     .nav {
       if (not hexo-config('toc.expand_all')) {
         .nav-child {
-          --height: 0;
           height: 0;
           opacity: 0;
           overflow: hidden;
-          transition-property: height, opacity, visibility;
+          transition-property: height, opacity;
           transition: $transition-ease;
-          visibility: hidden;
         }
 
         .active > .nav-child {
-          height: var(--height, auto);
+          height: auto;
+          height: calc-size(auto, size);
           opacity: 1;
-          visibility: unset;
         }
       }
 
diff --git a/source/js/utils.js b/source/js/utils.js
index 2bc2c8495..554e7d1b9 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -352,24 +352,16 @@ NexT.utils = {
     const target = navItemList[index];
     if (!target || target.classList.contains('active-current')) return;
 
-    const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
-
     nav.querySelectorAll('.active').forEach(navItem => {
       navItem.classList.remove('active', 'active-current');
     });
     target.classList.add('active', 'active-current');
 
     let activateEle = target.querySelector('.nav-child') || target.parentElement;
-    let navChildHeight = 0;
 
     while (nav.contains(activateEle)) {
       if (activateEle.classList.contains('nav-item')) {
         activateEle.classList.add('active');
-      } else { // .nav-child or .nav
-        // scrollHeight isn't reliable for transitioning child items.
-        // The last nav-item in a list has a margin-bottom of 5px.
-        navChildHeight += (singleHeight * activateEle.childElementCount) + 5;
-        activateEle.style.setProperty('--height', `${navChildHeight}px`);
       }
       activateEle = activateEle.parentElement;
     }
@@ -408,16 +400,8 @@ NexT.utils = {
     const tocPanel = panelContainer.firstElementChild;
     const overviewPanel = panelContainer.lastElementChild;
 
-    let postTOCHeight = tocPanel.scrollHeight;
-    // For TOC activation, try to use the animated TOC height
-    if (index === 0) {
-      const nav = tocPanel.querySelector('.nav');
-      if (nav) {
-        postTOCHeight = parseInt(nav.style.getPropertyValue('--height'), 10);
-      }
-    }
     const panelHeights = [
-      postTOCHeight,
+      tocPanel.scrollHeight,
       overviewPanel.scrollHeight
     ];
     panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);

From d05aa2c920aec8a7cca4fd589af05c7c7354b95c Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 22 Nov 2024 02:56:35 +0800
Subject: [PATCH 2/2] Add comment

---
 source/css/_common/outline/sidebar/sidebar-toc.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/css/_common/outline/sidebar/sidebar-toc.styl b/source/css/_common/outline/sidebar/sidebar-toc.styl
index efeca297d..b926524a2 100644
--- a/source/css/_common/outline/sidebar/sidebar-toc.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toc.styl
@@ -43,6 +43,7 @@ if (hexo-config('toc.enable')) {
 
         .active > .nav-child {
           height: auto;
+          // https://caniuse.com/mdn-css_types_calc-size
           height: calc-size(auto, size);
           opacity: 1;
         }