fix(sidebar): use placeholders in select menu

[manishprivet]

Description

sometimes current page can be missing from navigation data if the entry is not present in the navigation.json file. In those cases it shows an empty select box on smaller screens. This PR chooses the first item in the navigation tree if the current page is missing from there

Validation

Before

After

Related Issues

Fixes #7646

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 17, 2025 5:23pm

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.46%. Comparing base (8cf10eb) to head (4827696).
Report is 6 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7871   +/-   ##
=======================================
  Coverage   75.46%   75.46%           
=======================================
  Files         101      101           
  Lines        8306     8306           
  Branches      218      218           
=======================================
  Hits         6268     6268           
  Misses       2036     2036           
  Partials        2        2           

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

[avivkeller]

I feel like this gives the impression that the current page is "Introduction to Node.js". I would rather the placeholder be the title of the current page

[manishprivet]

I feel like this gives the impression that the current page is "Introduction to Node.js". I would rather the placeholder be the title of the current page

I feel like this gives the impression that the current page is "Introduction to Node.js". I would rather the placeholder be the title of the current page

@avivkeller That however contradicts with the fact that the page doesn't exist in the select menu 😓
Did we ever try to generate the navigation.json automatically. I guess it won't work with i18n though

[manishprivet]

@avivkeller I incorporate the changes. The new UX looks like this

Screen.Recording.2025-06-18.at.2.18.13.mov

[avivkeller]

Each page has a title, can't we use the frontmatter?

[manishprivet]

Each page has a title, can't we use the frontmatter?

You are right, I am still getting a hang of the new repo.

[Copilot]

Pull Request Overview

This PR addresses empty mobile select boxes when the current page is missing from the sidebar navigation by introducing a placeholder and passing the page title as a default.

• Add an optional placeholder prop to the Sidebar component and forward it to the mobile select.
• Pull frontmatter.title via useClientContext in withSidebar and supply it as the placeholder.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/ui-components/Containers/Sidebar/index.tsx	Added a placeholder prop to SidebarProps and applied it to the mobile Select.
apps/site/components/withSidebar.tsx	Imported useClientContext and passed frontmatter?.title into the placeholder.

Comments suppressed due to low confidence (2)

packages/ui-components/Containers/Sidebar/index.tsx:49

• Add a unit test to verify that when currentItem is missing, the placeholder prop is displayed and the first navigation item is selected by default.

          placeholder={placeholder}

packages/ui-components/Containers/Sidebar/index.tsx:18

• [nitpick] Document the purpose and expected behavior of the placeholder prop in SidebarProps, including when and how it should be used.

  placeholder?: string;

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 96	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 99	🟢 96	🟢 100	🟠 83	🔗
/en/download	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗