feat: add controls to collapse side navigations

[HamedFarazi]

Description

This PR implements the ability to collapse the left and right side navigations, providing a more focused and distraction-free reading experience.

The implementation introduces independent controls for both sidebars:

The left sidebar containing the API/site navigation can be collapsed and restored.
The right sidebar containing the "On this page" / metadata navigation can be collapsed and restored.
When a sidebar is collapsed, a compact rail remains visible with a control to restore it.
Both sidebars can be collapsed independently, allowing users to hide either one or both at the same time.
When both sidebars are collapsed, the main content expands to make better use of the available viewport width.
Sidebar transitions are animated to make expanding and collapsing feel smooth.
Sidebar state is persisted in localStorage, so the user's preference is preserved across navigation and page reloads.
The state is initialized in a hydration-safe way to avoid server/client rendering mismatches.
Accessible labels are provided for both expand and collapse controls.
The existing navigation behavior is preserved when the sidebars are expanded.
Implementation details

A shared sidebar state provider was introduced to keep the left and right sidebar states independent and accessible throughout the relevant layouts.

Reusable components were added for:

Sidebar toggle controls
Collapsed sidebar rails
Article layouts that are aware of sidebar state
Content layouts that are aware of sidebar state

The existing article and content layouts were updated to react to the sidebar state and dynamically adjust their grid columns when one or both sidebars are collapsed.

The UI component layouts were also extended to support the additional layout state without changing their existing default behavior.

Validation

The following checks passed successfully during the commit process:

Prettier
ESLint
Stylelint
TypeScript type checking (lint:types)

The functionality was also manually verified across the affected layouts, including sidebar expansion/collapse behavior and navigation between pages.

Reviewers should specifically verify:

The left navigation can be collapsed and restored.
The right "On this page" navigation can be collapsed and restored.
Both sidebars can be collapsed independently.
Collapsing both sidebars provides the expected wider content area.
The collapsed rails remain accessible so the navigation can be restored.
Sidebar preferences persist after navigating between pages and refreshing the page.
Existing pages without sidebar navigation continue to behave correctly.
The layout remains responsive at supported viewport sizes.
Related Issues

Closes #9099

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.

• I have run the project's formatting/linting checks and verified the changed files are correctly formatted.

• 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 GitHub.

Project	Deployment	Actions	Updated (UTC)
nodejs-org	Ready	Preview	Aug 27, 2026 9:51am