Skip to content

Add Vertical lines to the sidebar#2633

Merged
bgravenorst merged 6 commits intomainfrom
vert-lines
Jan 27, 2026
Merged

Add Vertical lines to the sidebar#2633
bgravenorst merged 6 commits intomainfrom
vert-lines

Conversation

@bgravenorst
Copy link
Copy Markdown
Contributor

@bgravenorst bgravenorst commented Jan 21, 2026

Description

  • Removed the min-width: 1900px root font-size increase to eliminate the jarring large-screen typography jump.
  • Added sidebar vertical tree guide lines while removing the hover “highlight bar” in favor of a more TOC-like hover treatment.

Issue(s) fixed

Fixes #2632 and #2624

Preview

Checklist

  • If this PR updates or adds documentation content that changes or adds technical meaning, it has received an approval from an engineer or DevRel from the relevant team.
  • If this PR updates or adds documentation content, it has received an approval from a technical writer.

Note

Introduces a refined docs sidebar with vertical guide lines, consistent indentation, and clearer active/hover states, plus a selected-row background highlight that doesn’t tint entire subtrees.

  • Adds sidebar CSS variables and styles in theme/_sidebar.scss for tree lines, indentation, hover/active behavior, and dark mode tweaks; highlights current row using --doc-sidebar-line-x and data-current-page
  • Swizzles sidebar items: updates DocSidebarItem/Category to stamp data-current-page; adds new DocSidebarItem/Link component with external-link handling and data-current-page support
  • Ensures full-row clickable areas for links and removes the legacy hover “highlight bar” in favor of subtle text emphasis
  • Removes @media (min-width: 1900px) root font-size bump in app.scss to avoid large-screen typography jump

Written by Cursor Bugbot for commit 98702dd. This will update automatically on new commits. Configure here.

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
metamask-docs Ready Ready Preview, Comment Jan 27, 2026 3:43am

Request Review

@bgravenorst bgravenorst changed the title Vert lines Added Vertical lines to the sidebar Jan 21, 2026
@bgravenorst bgravenorst changed the title Added Vertical lines to the sidebar Add Vertical lines to the sidebar Jan 21, 2026
@AyushBherwani1998
Copy link
Copy Markdown
Member

Love it!!

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
@bgravenorst bgravenorst marked this pull request as ready for review January 27, 2026 03:39
@bgravenorst bgravenorst requested review from a team as code owners January 27, 2026 03:39
Copy link
Copy Markdown
Member

@AyushBherwani1998 AyushBherwani1998 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

)}
// Avoid CSS :has() dependency by stamping state on the row element
data-current-page={isActive ? 'true' : undefined}
key={label}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unnecessary key prop on component root element

Low Severity

The key={label} prop on the root <li> element doesn't serve its intended purpose. React's list reconciliation uses keys at the component boundary level (when the parent maps over items), not on elements returned inside components. The parent component (Docusaurus's DocSidebarItems) handles keying when rendering DocSidebarItemLink components. This key prop is effectively dead code that could confuse developers into thinking it helps with list reconciliation.

Fix in Cursor Fix in Web

@bgravenorst bgravenorst merged commit 5beadee into main Jan 27, 2026
17 of 18 checks passed
@bgravenorst bgravenorst deleted the vert-lines branch January 27, 2026 03:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create vertical lines in the sidebar navigation

2 participants