[DashboardLayout] Fix sidebar CSS transitions for some breakpoints

[gil-obradors]

Closes #4505

Disable the CSS transitions only for the temporary sidebar that shows on mobile devices, but also not needed when CollapsibleSidebar is disabled.

• I've read and followed the contributing guide on how to create great pull requests.
• I've updated the relevant documentation for any new or updated feature.
• I've linked relevant GitHub issue with "Closes #".
• I've added a visual demonstration in the form of a screenshot or video.

Enregistrament.de.pantalla.2024-12-08.213424.mp4

[apedroferreira]

Suggested change

	const hasDrawerTransitions = isOverSmViewport && !disableCollapsibleSidebar;
	const hasDrawerTransitions = isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport);

Thanks a lot for your PR!

Looks like this suggestion would be the correct logic instead, as when disableCollapsibleSidebar is true, the non-persistent drawer menu shows up to the md breakpoint as opposed to just sm.

This would require replacing the isUnderMdViewport variable with isOverMdViewport and inverting all logic where isUnderMdViewport is currently being used (it's only in a couple of places).

[apedroferreira]

My first suggestion was incorrect, the new one should be good!
Sorry if it caused any confusion.

[Janpot]

How hard would it be to add coverage for this in a test? Ideally we aim for adding tests when we fix bugs and especially regressions.

[apedroferreira]

How hard would it be to add coverage for this in a test? Ideally we aim for adding tests when we fix bugs and especially regressions.

Probably quite difficult here as it's related to CSS transitions, which could also mean it's not a major issue that needs to be covered by tests...
Unless some kind of visual snapshots can be taken during the transition, maybe we could try that.

[Janpot]

Unless some kind of visual snapshots can be taken during the transition, maybe we could try that.

No, don't worry in that case. Let's not waste time on it right now.