Use collapse component in docs' sidenav

[ffoodd]

Related to #30073, use collapse component in sidebar nav.

Preview: https://deploy-preview-30230--twbs-bootstrap.netlify.com/docs/4.3/getting-started/introduction/

[XhmikosR]

This has the issue I also faced back then, the show/collapse is jaggy, or whatever the proper word is to describe this :P

My previous PR #29104

[ffoodd]

@XhmikosR The struggling transitions was due to flex-column and wrapping that didn't happen at the right time. I guess it's good now.

I chose to make it in docs.css instead of using utilities since it's pretty specific: should I change it to use utilities?

[XhmikosR]

It's fine, thanks! But do we need the custom JS code to toggle the active class now? Can't we make use of another built-in class for this here and drop the custom JS toggling code?

I remember @mdo not liking the transition there, which was another reason I dropped my PR.

[ffoodd]

You were right, I was able to drop the custom JS (and the associated class in markup) by simply using aria attributes as hooks for styles. It makes sense, to me.

About transition, it's all about the collapse component: I think it's more consistent to keep it, but we should be able to reset it if you decide otherwise.

[mdo]

You know what, I can dig it.

Makes me think that we could also, in another PR, do a docs or dashboard example that uses this same kind of layout and sidebar. We always get folks asking to use pieces of our docs :).

[ffoodd]

Hi there, just to let you know: my second child is just born, so don't expect me to work on this until mid-march 👶

[MartijnCuppens]

Congrats @ffoodd!

[ffoodd]

Here I am :)

From my view, the only remaining question is whether to keep [aria-expanded="true"] selector or to switch to &.has-children .bd-sidenav-group-link:not(.collapsed) (and adding .collapsed class in markup for first load).

@MartijnCuppens what's your opinion? We may also try to use another class name beside .bd-sidenav-group-link but I'm not really sure it would work…

[MartijnCuppens]

@ffoodd, in general classes are used for theming, aria labels for accesibility.

I just simplified the styles a little bit. Not sure if we should use a class name for the links. I think we can use the less strict approach here since all links have a lot of styles in common.

[ffoodd]

@MartijnCuppens :not(:only-child) is a nice move!

[XhmikosR]

I like it! Less code, better for me :)

Waiting for @patrickhlauke's, @mdo's and @MartijnCuppens's approval.

EDIT: the transition is something we should vote, I can't tell I like it or not, especially for long submenus

[XhmikosR]

@ffoodd can you rebase this please?

[ffoodd]

@XhmikosR Done :)

[XhmikosR]

I'm going to merge this and we can tweak it further later.

[inwardmovement]

Did you guys consider using the accordion alternative?

At first sight I think it may be more practical and pleasant to use (+ resulting in a less long sidebar ; is it useful to have more than one section expanded at a time?)

[XhmikosR]

@inwardmovement please make new issues, commenting on old stuff is hard to track.