Restyle the docs sidebar and top bar to match Figma - #3898
Open
itsalexcm wants to merge 12 commits into
Open
Conversation
Island overviews nest as folders, assembler titles can override nav labels, and the tree uses a single chevron without the htmx top-bar indicator. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Move the version control into the top bar and match Products panel chrome, motion, offset, and trailing icons to EUI. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
The version selector no longer sits above View as Markdown, so the 24px padding and empty flex placeholder left a hole at the top of the rail. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Puts back the 24px top padding so the page-action list aligns with the left sidebar, and formats the Products dropdown CSS so Prettier CI passes. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Nested tocs and single-child section listings are islands so the sidebar shows the current book instead of the ancestor tree. Only the immediate parent is a back-link. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Boosted navigation now replaces #main-container. Same-tree pages keep #pages-nav via hx-preserve so expanded folders do not flash closed. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the Figma SVG copies so Guides, APIs, and folder/island chevrons share the same EUI glyphs as the rest of the chrome. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
A space-indented pattern match failed IDE0055 as an error and blocked every build. Also drop an unused assignment that ESLint rejected. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
CI's npm job failed fmt:check on these two files after the nav restyle. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Nested books lose their parent trail once the sidebar is the current island. Stack island ancestors so the left nav can take you back. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Mpdreamz
approved these changes
Aug 25, 2026
Single-child sections share a URL with their listing, so the back trail linked to the page already on screen. The heading drops uppercase and uses 14/20 at #1c1e23. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
Mpdreamz
requested changes
Aug 25, 2026
Mpdreamz
left a comment
Mpdreamz
left a comment
Member
There was a problem hiding this comment.
We need to make sure these changes are gated behind NAVIGATION_PREVIEW. Working on amending the PR
The UI changes were visible even when NAVIGATION_PREVIEW was disabled. Scope all new CSS (secondary-nav.css, pages-nav-figma.css) and the 56px --offset-top override to body.navigation-preview. Add a navigation-preview body class when the flag is on. Make _SecondaryNav, _PagesNav, and _TocTree conditional so flag-off renders the pre-restyle HTML. Introduce _TocTreeNavLegacy for the old nav item markup (label- based toggle, mt-4/mt-6 spacing). Thread NavigationPreviewEnabled through NavigationRenderModel so both isolated and assembler writers set it from their feature flag context. Update tests to opt in to the new nav shell where needed. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Mpdreamz
approved these changes
Aug 25, 2026
Mpdreamz
left a comment
Mpdreamz
left a comment
Member
There was a problem hiding this comment.
Gated the visual changes too behind the feature flag.
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.
Why
The nav-preview top bar and left TOC still used the old chrome after #3873 landed the section dropdowns. Readers saw a version selector in the right rail, a Products panel that did not match EUI, and a sidebar that did not match the Figma nav.
What
Applies the Figma sidebar treatment on the existing V1 TOC (single chevron, island overview as a folder, assembler
navigation_titleoverrides) without enablingNAV_V2. Moves the version selector into the top bar and restyles Products to the same EUI popover chrome, motion, offset, and trailing-icon size as the version control. Drops the empty gap above View as Markdown now that the selector no longer sits in that rail.Stacked on #3873 (
feature/nav-section-dropdown). Preview without feature flags: assemblerget-startedon desktop.Nav.mov
Made with Cursor