Skip to content

feat(web): make the top navigation bar sticky - #966

Open
btea wants to merge 3 commits into
nodejs:mainfrom
btea:feat/sticky-navigation-bar
Open

feat(web): make the top navigation bar sticky#966
btea wants to merge 3 commits into
nodejs:mainfrom
btea:feat/sticky-navigation-bar

Conversation

@btea

@btea btea commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Description

Keep the logo, search box, and theme toggle visible while scrolling.

  • Wrap NavBar in a sticky container (z-index 40)
  • Offset the sticky meta bar by --header-height so it is not covered
  • Add scroll-margin-top to anchored headings below the sticky bar
  • Raise Radix popups above the bar (z-index 50, overrides inline style)

It allows you to quickly search for information anywhere on the page without having to scroll to the top.

Details image

Validation

Related Issues

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run node --run test and all tests passed.
  • I have check code formatting with node --run format:check & node --run lint.
  • I've covered new added functionality with unit tests if necessary.

Copilot AI review requested due to automatic review settings July 31, 2026 04:15
@btea
btea requested a review from a team as a code owner July 31, 2026 04:15
@vercel

vercel Bot commented Jul 31, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
api-docs-tooling Ready Ready Preview Jul 31, 2026 5:11am

Request Review

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@cursor

cursor Bot commented Jul 31, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Presentation-layer CSS and layout tweaks only; no auth, data, or API changes.

Overview
Makes the doc site top nav stay visible while scrolling by wrapping NavBar in a sticky container (position: sticky, z-index: 40, overflow: hidden to avoid the sidebar toggler overlapping content above).

Aligns other sticky/overlay UI with the bar height using var(--header-height, 4rem): the table-of-contents MetaBar gets an inline top offset so it sits below the nav, and main [id] gets scroll-margin-top so in-page anchor jumps clear the header.

Raises Radix portal popups (theme toggle, etc.) above the sticky bar via z-index: 50 !important on [data-radix-popper-content-wrapper].

Minor changeset bumps @node-core/doc-kit (minor).

Reviewed by Cursor Bugbot for commit bc8cf11. Bugbot is set up for automated code reviews on this repo. Configure here.

@codecov

codecov Bot commented Jul 31, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.63%. Comparing base (b80958f) to head (bc8cf11).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #966   +/-   ##
=======================================
  Coverage   86.63%   86.63%           
=======================================
  Files         195      195           
  Lines       17938    17938           
  Branches     1632     1632           
=======================================
  Hits        15540    15540           
  Misses       2392     2392           
  Partials        6        6           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

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 using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit d5219c7. Configure here.

Comment thread packages/core/src/generators/web/ui/components/MetaBar/index.jsx Outdated
Copilot AI review requested due to automatic review settings July 31, 2026 04:48

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

The NavBar's invisible mobile menu checkbox is translated 200% above the
bar. Inside the sticky wrapper's stacking context it painted above the
announcement banner and intercepted clicks on its close button.
Copilot AI review requested due to automatic review settings July 31, 2026 05:10

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@avivkeller

Copy link
Copy Markdown
Member

Does this really need to be sticky? iirc unsticking was intentiona

@btea

btea commented Jul 31, 2026

Copy link
Copy Markdown
Contributor Author

Does this really need to be sticky? iirc unsticking was intentiona

Personally, I prefer convenient and quick access to search functions in various places. In contrast, many other tool websites seem to maintain this format.

Of course, I genuinely don't know that this was a deliberate design choice. Could you explain your reasoning? Thanks!

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.

3 participants