docs: stop sidebar jump and make scroll instant#161
Open
jayhack wants to merge 2 commits into
Open
Conversation
Move the docs header and sidebar into a persistent app/docs/layout.tsx so they no longer re-mount on every navigation. The sidebar is now a client component that derives the active item from usePathname(), which preserves its scroll position and stops the visible jump when clicking links. Also reserve the scrollbar gutter (scrollbar-gutter: stable) to prevent horizontal layout shift between pages of different heights, and switch scroll-behavior from smooth to auto so scroll-to-top is instantaneous. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Summary
Fixes two docs-site annoyances reported after #160:
app/docs/[[...slug]]/page.tsxrendered the header + sidebar + content itself, so every navigation re-mounted the sidebar and reset its scroll position. I moved the header and sidebar into a persistentapp/docs/layout.tsx, and made the sidebar a client component (components/docs-sidebar.tsx) that derives the active item fromusePathname(). The sidebar now stays mounted across navigations, preserving scroll and active state without a jump.scroll-behavior: smooth→autoinglobals.cssso scroll-to-top (and in-page anchor jumps) are instantaneous.Also added
scrollbar-gutter: stableso pages of different heights don't cause a horizontal shift when the viewport scrollbar appears/disappears (another source of the sidebar "moving").Changes
site/app/docs/layout.tsx(new): persistent header + sidebar shell + mobile menu.site/components/docs-sidebar.tsx(new): client sidebar nav usingusePathname()for active highlighting.site/app/docs/[[...slug]]/page.tsx: reduced to just the article + TOC (header/sidebar moved to the layout).site/app/globals.css:scroll-behavior: auto+scrollbar-gutter: stable.Test plan
npm run buildinsite/passes (TypeScript + 287 static pages).Made with Cursor