feat: tablet/desktop header and sidebar navigation

[g-francesca]

Deploy Preview: https://deploy-preview-2185--expressjscom-preview.netlify.app/en/

This PR completes the desktop implementation of the redesigned navigation system for expressjs.com, building on the mobile navigation foundation.

Navigation System

Desktop/Tablet Features

• Slide-in sidebar effect for smooth desktop navigation experience
• Multi-level navigation with automatic breadcrumb-style navigation across menu levels
• Keyboard navigation improvements with proper focus management and tab navigation
• Version-aware routing with automatic URL prefix handling for Express 5x, 4x, and 3x documentation

Header Component

Added:

• Search trigger button as a separate component
• Skip to content link for accessibility

Sidebar Component

• Multi-level menu rendering with dynamic depth support
• Active state detection based on current path
• Automatic menu state management with SidebarController
• ARIA attributes for screen reader support

[g-francesca]

Could you please check whether the current implementation is closer to what you had in mind?

Here’s how I’ve implemented the slide-in/slide-out behavior:

• When navigating within docs/api/middleware pages, the lateral column is visible by default. It can be closed using the back button.
• On other pages (e.g., home, support), the sidebar is hidden by default. If I click an item that triggers a submenu (such as “Docs”), the sidebar slides in from the left and pushes the main content to the right. The back button closes the submenu.

[ShubhamOulkar]

The back button closes the submenu.

I think implementing sidebar toggle is a useful feature for this design. Ref image

I noticed following user experience issues.

1. Side bar should show current focused/selected menu btn

2. sidebar is not following user current 2nd level selection

Let me know if you are having different thoughts. Thank you👍

[bjohansebas]

The code looks good to me. At a 170% zoom, horizontal scrolling starts, any way to fix that? At 200% zoom, the mobile menu appears, so the scroll disappears. When it comes to accessibility, I don’t know much, so I’m asking, would that be important?

[g-francesca]

The code looks good to me. At a 170% zoom, horizontal scrolling starts, any way to fix that? At 200% zoom, the mobile menu appears, so the scroll disappears. When it comes to accessibility, I don’t know much, so I’m asking, would that be important?

@bjohansebas I’ve checked this, and it’s happening because the page you’re viewing contains a table, including very long text, and this is causing the horizontal overflow.

The markdown file wraps the table in a <div class="table-scroller"> (inherited from old md files, I've not touched those yet), but there’s currently no styling applied to that wrapper, since table styles haven’t been implemented yet.

I’ve made a note of this so I can come back and address it later, when reviewing the documentation pages.
Thanks for reporting

[g-francesca]

The back button closes the submenu.

I think implementing sidebar toggle is a useful feature for this design. Ref image

I noticed following user experience issues.

1. Side bar should show current focused/selected menu btn
2. sidebar is not following user current 2nd level selection

Let me know if you are having different thoughts. Thank you👍

Hi @ShubhamOulkar,
I've reviewed a bit the sidebar to address this comment. Here's what I did:

• Sidebar toggle: I’ve added it. It appears on tablet and desktop when the current navigation level is greater than 1.
• Selected item in the root column: I had the same doubt. I’ve added styles for the selected item so it’s visually highlighted. This means there can now be both an active item (based on the current page) and a selected item (based on the item clicked to navigate deeper).
• Bug on deeper nested columns: I’ve fixed this now.

Please let me know if these changes work for you, or if you had something different in mind.

Sharing some screenshots:

[ShubhamOulkar]

Hi 👋 @g-francesca, I think my explanation for toggler feature do not reach you correctly. What I mean in this image is https://www.awesomescreenshot.com/image/58925298?key=c3904ce34fde4f282e83f7c3a9aa18f3 that docs, api, resources buttons should perform toggle of the sidebar.

Current design is also looking great to me. But there is bug in it. Ref bug.

[ShubhamOulkar]

I am fine with current design. Please fix bug ref in video.

Thank you @g-francesca for your kind support.

[g-francesca]

I am fine with current design. Please fix bug ref in video.

Thank you @g-francesca for your kind support.

I've fixed the bug. Thanks for reporting! I missed it before. I'm closing this PR.