🐛 Bug: Active state mismatch between sidebar links and content headings on documentation pages

Describe the bug

Description
On documentation/blog pages, both the sidebar navigation and in-page content headings allow scrolling to specific sections. However, the highlighted “active” state becomes inconsistent when switching between them.

Steps To Reproduce

Open any documentation page (e.g., JSON Schema guides).

Click a content subheading (e.g., Data Formats).

The heading is highlighted correctly.

Click a sidebar item (e.g., Optimization Tips).

Page scrolls to the correct section.

Sidebar item does not show active state.

The previously clicked heading remains highlighted even though it’s no longer the current section.

Expected Behavior

Only the currently visible section should be highlighted.

Sidebar and content heading highlights should remain synchronized.

Previous highlights should be cleared when navigating via sidebar or scrolling.

Screenshots

https://github.com/user-attachments/assets/2cb7a718-87c0-4797-8551-0f1db273bcd1

Device Information [optional]

- OS:
- Browser:
- version:

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

Yes