Use scrollspy on docs pages

[GeoSot]

closes #30977

Maybe can have better choices on css and classes

Preview: https://deploy-preview-33428--twbs-bootstrap.netlify.app/docs/5.2/getting-started/introduction/

[XhmikosR]

Oh, nice!

I'll check it out after beta3 to see what we can improve (not a huge fan of the replacements, but I guess there's no other solution right now since Hugo doesn't allow us to customize the ToC template). Also, sort of looks like it's a few pixels off.

I'm pretty sure @mdo will tweak the CSS as needed because currently it looks a little weird 😛

[mdo]

Redesigned things a bit to add a hover state and restore the v3-ish sidebar highlighting. Here's an example of nested active items plus a hovered item down the page.

@GeoSot Is it possible to implement an offset for the scrollspy anchors? Our sticky subnav gets in the way I think, so when I click on the ToC item, it doesn't get highlighted until I scroll.

[mdo]

Btw, I'm game for this in v5.1 (or v5.1.1) or v5.2 depending on everyone else :).

[GeoSot]

Btw, I'm game for this in v5.1 (or v5.1.1) or v5.2 depending on everyone else :).

Glad to hear it, cause I cannot do much more on the current implementation 😢

I 'll give it a try but my real hope is on Intersection observer #33421

[XhmikosR]

@mdo on the CSS side, can't we have a transparent left border in the ToC items so that they don't jump when the active class is added?

[ffoodd]

We may also use background to highlight, as we do in ScrollSpy doc, or play with a pseudo-element to allow more design possibilities.

BTW I really like it, thanks @GeoSot :)

[mdo]

The accuracy of the highlighting feels a little off in at least Safari for me. Anything we can do to help with that?

[mdo]

@mdo on the CSS side, can't we have a transparent left border in the ToC items so that they don't jump when the active class is added?

This is a little stale, but this was how I implemented it already :).

[mdo]

Any chance we can check in on this one though?

[mdo]

Played with this more locally and it's a little off—sections are getting skipped. Is there anything else to improve here or in the scrollspy implementation itself?

[louismaximepiton]

Thanks a lot for this work! Is there a chance to see it live in Bootstrap anytime soon ?

I don't know if the design is up to date but it looks fine to me !

The only issues I can see so far are due to the scrollspy component itself so I think it could be merged as-is ?

[louismaximepiton]

I think that there should be a block {{ if (eq .Page.Params.toc true) }} around to avoid trigger the js when there's no need.

That said, I wonder if these attributes should be on .bd-main, .bd-content or keep it here ?

[julien-deramond]

Some sections are off indeed but it's more likely coming from the Scrollscpy component itself.
Really like what brings this PR in terms of UX.
From what I have tested so far, I think we can deactivate this feature under 991px (when the menu is no more on the right hand side).