[UX]: Add Active Section Highlighting to Docs Sidebar #8323

Description

Currently, when reading through a documentation page (e.g., /output), the sidebar navigation on the left does not visually indicate which section the user is currently viewing. As the user scrolls through the main content, the sidebar remains static with no active state feedback, making it difficult to:

1. Know where you are: There is no visual distinction (highlight, bold, color change, or animation) on the sidebar item corresponding to the section currently visible in the viewport.
2. Jump to a desired section: Without a clear active indicator, users cannot quickly orient themselves within long documentation pages.
3. Track scroll progress: When the main content is scrolled and a new section (e.g., "Entry" → "Output" → "Loaders") enters the viewport, the sidebar does not automatically scroll to keep the active item visible, nor does the active highlight transition from one subheading to another.

Current Behavior

• The sidebar lists all page sections and subheadings (e.g., Entry, Output, Loaders, Plugins, Mode, etc.) as static links. Scrolling through the main content does not update any visual state in the sidebar.
• There is no animation or transition effect when moving between sections.

Proposed feature

• As the user scrolls through the main documentation content, the sidebar should highlight the currently active section
• The active highlight should smoothly transition from one section to the next as the user scrolls past section boundaries.
• Clicking a sidebar item should scroll the main content to the corresponding section and immediately update the active state.

Inspo

The tailwind CSS docs implement this pattern effectively with a smooth scroll-tracking sidebar.(see on the right side of page--this page section.)

Results

This enhancement would significantly improve the reading and navigation experience on long documentation pages, especially for new users who are trying to orient themselves within the webpack documentation.