Use calc-size in .active > .nav-child

[stevenjoezhang]

PR Checklist

• The changes have been tested (for bug fixes / features).
• Docs in NexT website have been added / updated (for features).

PR Type

• Bugfix.
• Feature.
• Improvement.
• Code style update (e.g. formatting, linting).
• Refactoring (no changes to functionality and APIs).
• Documentation.
• Translation.
• Other... Please describe:

What is the current behavior?

#323 introduced a transition animation for TOC, and due to the need to calculate heights, the author @PaperStrike wrote the algorithm in JavaScript. However, it is not accurate when encountering collapsed rows (#772) and no better solution has been found. I noticed that this issue might be resolved using the newly introduced calc-size in CSS, but it is currently only supported by Chrome and Edge versions 129 and above (https://caniuse.com/mdn-css_types_calc-size). We may need to wait until it is supported by other mainstream browsers (such as Safari and Firefox) before merging. You are welcome to test the TOC animation effects on the latest versions of Chrome and Edge.

Issue resolved:

What is the new behavior?

• Link to demo site with this changes:
• Screenshots with this changes:

How to use?

In NexT _config.yml:

[coveralls]

Pull Request Test Coverage Report for Build 11959817132

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 97.451%

---

Totals
Change from base Build 11946755901:	0.0%
Covered Lines:	400
Relevant Lines:	405

---

💛 - Coveralls

[Copilot]

Pull Request Overview

This PR replaces JavaScript-based height calculations for TOC (Table of Contents) animation with the new CSS calc-size function to improve accuracy and simplify the codebase. The change addresses issues with collapsed rows in the TOC animation that were present in the JavaScript implementation.

• Removes JavaScript height calculation logic for TOC navigation items
• Replaces CSS custom property --height with native calc-size(auto, size)
• Simplifies the transition properties by removing visibility handling

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
source/js/utils.js	Removes JavaScript height calculation and CSS custom property setting for TOC animations
source/css/_common/outline/sidebar/sidebar-toc.styl	Replaces custom property height with calc-size and simplifies transition properties

Comments suppressed due to low confidence (1)

source/css/_common/outline/sidebar/sidebar-toc.styl:47

• The calc-size CSS function is only supported in Chrome and Edge 129+, and not yet supported in Firefox or Safari. This will cause the TOC animation to break in unsupported browsers. Consider adding a fallback or waiting for broader browser support before merging.

          height: calc-size(auto, size);

[Copilot]

Removing visibility from the transition properties may cause visual glitches during the animation. The visibility property was likely included to ensure smooth show/hide transitions. Consider testing thoroughly across different browsers to ensure the animation remains smooth without it.

Suggested change

	transition-property: height, opacity;
	transition: $transition-ease;
	transition-property: height, opacity, visibility;
	transition: $transition-ease;
	visibility: hidden;