Doc right section fix

[antedotee]

What this PR does:
This PR adds the functionality of highlighting of the right section along with scrolling of the main content.

Why we need it:
To enhance the user experience

Fixes #6464

[antedotee]

@eeshaanSA Please take a look.

[rahulshendre]

@antedotee, wouldn't it be better to let JS only toggle the active class and keep all styling in SCSS to avoid duplication and overrides, what do you think?

[rahulshendre]

animation_right_side.mp4

@eeshaanSA As mentioned in the previous meeting, you suggested that anyone with JS experience to take a look at this. I have reviewed and tested it locally.

Overall the behavior looks good. A couple of suggestions:

1. The transition speed feels a bit fast, increasing it to 0.3s for a smoother look would be better (currently 0.2s).
2. There's a minor UX issue (pointed out in the video as well), when text becomes "active", the width increases by 11px (3px border + 8px padding) causing text to wrap and create a visual disturbance. @antedotee you can consider reserving this space in the inactive state to prevent layout shift.

Please address the review comment about removing inline styles from JS. Once those are fixed, this LGTM.
Thanks

[antedotee]

@rahulshendre I have implemented the suggested changes. Please have a look and let me know if there are any further improvements to be worked upon.

[rahulshendre]

@antedotee I pulled the latest changes and tested them locally.

The current behaviour still feels off in practice.
From a JS perspective, one thing that stands out is that the scroll handler updates DOM state on every scroll event, even when the active section hasn’t changed, which can lead to unnecessary DOM manipulation during scrolling.