Skip to content

fix(theme/Nav): expand navbar item click areas - #3633

Merged
SoonIter merged 8 commits into
mainfrom
codex/optimize-navbar-click-area
Aug 27, 2026
Merged

fix(theme/Nav): expand navbar item click areas#3633
SoonIter merged 8 commits into
mainfrom
codex/optimize-navbar-click-area

Conversation

@SoonIter

@SoonIter SoonIter commented Aug 27, 2026

Copy link
Copy Markdown
Member

Summary

Follow up on #3629 by making the spacing between navbar items interactive:

  • express navbar item spacing as a 32px / 24px gap variable, then apply half of it as padding on each adjacent item so click targets meet without dead space
  • use the same item sizing and spacing model for both left- and right-positioned navbar menus
  • remove the outer padding from the first and last items, preserving the menu's outer bounds without negative margins
  • use a fixed 24px spacing before the left menu, matching the other top-level navbar spacing and removing an unnecessary responsive branch

Validation:

  • Prettier check for NavMenu.scss
  • git diff --check
  • @rspress/core build and Publint for the navbar padding change
  • local before/after fixture available at both responsive sizes

The latest variable rename is calculation-equivalent: 32px / 2 = 16px and 24px / 2 = 12px, so it does not change rendered geometry. Repository CI remains the authoritative automated check.

Related Issue

Follow-up to #3629.

Screenshots

Before After
Navbar items were separated by non-interactive gap, limiting links to their text width The gap is split into adjacent item padding, making the full horizontal area interactive while keeping the left menu spacing at a consistent 24px

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

Copilot AI lite review requested due to automatic review settings August 27, 2026 09:03

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.

@chatgpt-codex-connector chatgpt-codex-connector 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.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 265cf15843

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/core/src/theme/components/Nav/NavMenu.scss Outdated
@github-actions

github-actions Bot commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Rsdoctor Bundle Diff Analysis

Found 5 projects in monorepo, 3 projects with changes.

📊 Quick Summary
Project Total Size Gzip Size Change Gzip Change
website_html 14.5 MB 2.1 MB 0 +19.0 B (0.0%)
website_js 16.9 MB 2.9 MB +180.0 B (0.0%) +33.0 B (0.0%)
website_md 1.9 MB 278.9 KB 0 0
auto_nav_sidebar_js 546.6 KB 172.6 KB +180.0 B (0.0%) +32.0 B (0.0%)
auto_nav_sidebar_html 447.5 KB 93.6 KB 0 0
📋 Detailed Reports (Click to expand)

📁 website_html

Path: website/doc_build/diff-rsdoctor/website_html/rsdoctor-data.json

📌 Baseline Commit: fcdc78f0fc59395802750ae0b13de1466b41ec17 | PR: #3632

Metric Current Baseline Change
📊 Total Size 14.5 MB 14.5 MB 0
🗜️ Gzip Size 2.1 MB 2.1 MB +19.0 B (0.0%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 14.5 MB 14.5 MB 0
📁 Other Assets 0 B 0 B 0

📦 Download Diff Report: website_html Bundle Diff

📁 website_js

Path: website/doc_build/diff-rsdoctor/website_js/rsdoctor-data.json

📌 Baseline Commit: fcdc78f0fc59395802750ae0b13de1466b41ec17 | PR: #3632

Metric Current Baseline Change
📊 Total Size 16.9 MB 16.9 MB +180.0 B (0.0%)
🗜️ Gzip Size 2.9 MB 2.9 MB +33.0 B (0.0%)
📄 JavaScript 16.6 MB 16.6 MB 0
🎨 CSS 168.5 KB 168.3 KB +180.0 B (0.1%)
🌐 HTML 0 B 0 B 0
📁 Other Assets 177.4 KB 177.4 KB 0

📦 Download Diff Report: website_js Bundle Diff

📁 auto_nav_sidebar_js

Path: e2e/fixtures/auto-nav-sidebar/doc_build/diff-rsdoctor/auto_nav_sidebar_js/rsdoctor-data.json

📌 Baseline Commit: fcdc78f0fc59395802750ae0b13de1466b41ec17 | PR: #3632

Metric Current Baseline Change
📊 Total Size 546.6 KB 546.5 KB +180.0 B (0.0%)
🗜️ Gzip Size 172.6 KB 172.6 KB +32.0 B (0.0%)
📄 JavaScript 475.4 KB 475.4 KB 0
🎨 CSS 64.6 KB 64.5 KB +180.0 B (0.3%)
🌐 HTML 0 B 0 B 0
📁 Other Assets 6.6 KB 6.6 KB 0

📦 Download Diff Report: auto_nav_sidebar_js Bundle Diff

Generated by Rsdoctor GitHub Action

@SoonIter

Copy link
Copy Markdown
Member Author
image

@SoonIter
SoonIter enabled auto-merge (squash) August 27, 2026 09:42
@SoonIter
SoonIter requested a review from Timeless0911 August 27, 2026 09:42
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying rspress-v2 with  Cloudflare Pages  Cloudflare Pages

Latest commit: b0f0bec
Status: ✅  Deploy successful!
Preview URL: https://352770f5.rspress-v2.pages.dev
Branch Preview URL: https://codex-optimize-navbar-click.rspress-v2.pages.dev

View logs

@SoonIter
SoonIter merged commit fe879af into main Aug 27, 2026
7 checks passed
@SoonIter
SoonIter deleted the codex/optimize-navbar-click-area branch August 27, 2026 09:57
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