feat(ContentToc): scroll list independently and center active link#258
Merged
Conversation
…4b9f7d) Port the desktop TOC enhancement from nuxt/ui: the content list scrolls independently (root lg:overflow-hidden, content lg:overflow-y-auto) and the active link is kept centered via an activeIndex watch that scrolls the content container directly. Adds a scroll shadow via useScrollShadow. Adapted to b24ui's TOC layout (sticky/max-h stays on the docs class prop; no indicator/highlight machinery). Uses b24ui's scrollbar-thin scrollbar-transparent idiom in place of the upstream scrollbar-none utility, which b24ui does not define. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JS8ypVfQSFzYVZzkTHhURb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Syncs upstream nuxt/ui commit
64b9f7d— feat(ContentToc): scroll list independently and center active link (#6697).What
On desktop the table-of-contents list now scrolls independently of the page, and the active link is kept centered as you scroll through the doc:
ContentToc.vue— adds anactiveIndexcomputed and awatchthat scrolls the content container directly (not the page) to center the active link when it changes. Applies a scroll shadow via the existinguseScrollShadowcomposable (ref="contentRef"+:style="scrollShadowStyle"on the desktop content div).theme/content/content-toc.ts—rootbecomesflex flex-col lg:overflow-hidden; the fixed rows (top/bottom/trigger) getlg:shrink-0; the flexing ones (container/content) getlg:min-h-0; andcontentgetslg:overflow-y-autoso the list scrolls on its own atlg.Adaptation & deviations
@memo not supported), and its sticky/max-h/mobile-overflow-y-autowrapper styling lives on the docsclassprop rather than the themeroot. The independent-scroll + centering feature is orthogonal to the indicator, so it ports cleanly on top of that structure.scrollbar-none, which b24ui does not define. Used b24ui's ownscrollbar-thin scrollbar-transparentidiom (fromair-design-tokens/components/scrollbar.css, matching the sidebar and the docs TOC wrapper) instead.[...slug].vuehunk only addshighlight/highlight-variant="circuit", which b24ui explicitly does not support — no change there.Verify (
CI=true)dev:prepare·lint·typecheck·test·build— all green. Suite 5309 passed / 6 skipped. 16 ContentToc snapshots updated (class-only: the newflex/overflow/shrink-0/min-h-0/scrollbar classes).scrollShadowStyleisundefinedwhen the list doesn't overflow, so no inline style appears in snapshots.Ledger: cursor advanced to
64b9f7d; previous entry1a3a9dcreconciled to PR #257.🤖 Generated with Claude Code
Generated by Claude Code