Sticky close button

[AntonKhorev]

Allows close buttons to stay visible when sidebar contents is scrolled.

Fixes #2174.

Also related to this because the button is not inside sidebar_content and is not being resent with page templates.

[tordans]

I think we should update the design of the circle to make it more clear when scrolled. Maybe a light gray background (for non hover) with a white border for some separation to the background?

[AntonKhorev]

The circle doesn't have a hover state, it's not clickable. If I give it a gray background or a border it will look like clickable.

If you actually want the circle to be clickable, you want a larger close button. Do you want it? I didn't change the button size in this pull request.

[tordans]

The transparent background suggest that it is clickable as a whole element already. Changing it to behave like that would be an UX improvement to me, yes. And would also make the scrolled-state more clear.

[AntonKhorev]

The transparent background suggest that it is clickable as a whole element already.

My goal was for the background was to suggest the opposite. It does two things:

• makes the button more visible when it's displayed over other things
• provides an unclickable separation between the button and other stuff

Changing it to behave like that would be an UX improvement to me, yes.

That doesn't have to do anything with sticky buttons. You want:

• larger close buttons
• different shape of close buttons: a circle with x inside instead of x

You can open another issues about that.

[tordans]

You can open another issues about that.

This PR makes the button sticky. I agree that the sticky button needs a visual separation to the content below. I don't think that it is good UX to make this area non-interactive (hover, click) – it's not what I would expect the interface to behave.

Unfortunately Bootstrap does not follow those UX decisions for their close button https://getbootstrap.com/docs/5.0/components/close-button/ (which only shows the non sticky version, but still…). However they do use a larger surface area for their burger menu https://getbootstrap.com/docs/5.0/components/navbar/#external-content which follows the same principle, IMO.

[AntonKhorev]

Unfortunately Bootstrap does not follow those UX decisions for their close button

If anyone wants larger close buttons, it's not difficult to do.

However they do use a larger surface area for their burger menu

Their burger button is similar to other outline buttons. You can remove border and padding if you want.