Sidebar scroll position resets on navigation, active item can be off-screen

Bắt đầu tại components/Sidebar/index.jsx và kiểm tra hành vi hiện có của forwardRef và điều hướng. Tái hiện việc tải lại với một mục ở phía dưới của thanh bên, sau đó xác minh rằng liên kết đang hoạt động hiển thị sau khi điều hướng, trong khi chỉ vị trí cuộn bên trong của thanh bên thay đổi, không phải vị trí cuộn của cửa sổ chính.

I couldn't push my own branch to make a PR so sharing this as issue instead. The fix belongs in components/Sidebar/index.jsx.

Problem
Clicking an item in the left sidebar causes a full page reload because navigation uses window.location.href in components/Sidebar/index.jsx. After the reload, the sidebar’s internal scroll position resets to the top.

As a result, when a user clicks a page located lower in the sidebar list, such as an item under TypeScript or Diagnostics, the selected item may still be active but no longer visible. The user then has to scroll through the sidebar again to find their current location.

Reproduction steps

• Open https://nodejs.org/learn
• Scroll the left sidebar to a lower item, for example Diagnostics → Memory
• Click the item
• After the page reloads, the sidebar scroll position has returned to the top, and the active item is off-screen

Expected behavior

The active sidebar item should remain visible after navigation.

Proposed fix

When the sidebar mounts, locate the active link inside the sidebar <aside>.
If that link is outside the visible portion of the sidebar’s own scroll container, adjust aside.scrollTop so the active item is centered in view. This only affects the sidebar’s internal scroll position and does not change the main window scroll.

Example approach

useEffect(() => {
  const aside = asideRef.current;
  const active = aside?.querySelector(`a[href="${CSS.escape(pathname)}"]`);
  if (!aside || !active) return;

  const offsetTop =
    active.getBoundingClientRect().top -
    aside.getBoundingClientRect().top +
    aside.scrollTop;

  const viewTop = aside.scrollTop;
  const viewBottom = viewTop + aside.clientHeight;

  if (offsetTop >= viewTop && offsetTop + active.offsetHeight <= viewBottom) {
    return;
  }

  aside.scrollTop = Math.max(
    0,
    offsetTop - aside.clientHeight / 2 + active.offsetHeight / 2
  );
}, [pathname]);

Notes

This approach uses the existing forwardRef exposed by @node-core/ui-components/Containers/Sidebar, so no upstream or vendor changes are required.

Alternative considered

Persisting the sidebar’s scrollTop in sessionStorage across reloads was considered, but rejected. That approach adds more complexity, such as saving on unload, restoring at the right time during hydration, and handling stale scroll state when the sidebar structure changes.

Ensuring the active item is visible is simpler and aligns with expected user behavior in most cases.