Skip to content

[DashboardLayout] Fix sidebar CSS transitions for some breakpoints#4522

Merged
apedroferreira merged 8 commits intomui:masterfrom
gil-obradors:patch-1
Jan 7, 2025
Merged

[DashboardLayout] Fix sidebar CSS transitions for some breakpoints#4522
apedroferreira merged 8 commits intomui:masterfrom
gil-obradors:patch-1

Conversation

@gil-obradors
Copy link
Contributor

@gil-obradors gil-obradors commented Dec 8, 2024 •
edited by apedroferreira
Loading

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

@gil-obradors
fix: hasDrawerTransition's logics
6af50e4 
disable the CSS transitions only for the temporary sidebar that shows on mobile devices, but also not needed when CollapsibleSidebar is disabled.

Signed-off-by: Gil Obradors <[email protected]>
apedroferreira
apedroferreira requested changes Dec 11, 2024
View reviewed changes
packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx Outdated

const hasDrawerTransitions =
isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
const hasDrawerTransitions = isOverSmViewport && !disableCollapsibleSidebar;
Copy link
Collaborator

@apedroferreira apedroferreira Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Collaborator

@apedroferreira apedroferreira Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@apedroferreira apedroferreira self-assigned this Dec 11, 2024
@apedroferreira apedroferreira added component: layout scope: toolpad-core Abbreviated to "core" type: bug It doesn't behave as expected. labels Dec 11, 2024
@Janpot
Copy link
Member

Janpot commented Dec 11, 2024 •
edited
Loading

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
Copy link
Collaborator

apedroferreira commented Dec 11, 2024 •
edited
Loading

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
Copy link
Member

Janpot commented Dec 11, 2024

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.

@apedroferreira apedroferreira changed the title fix: hasDrawerTransition's logics [DashboardLayout] Fix sidebar CSS transitions for some breakpoints Dec 24, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 30, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 6, 2025
@mui-bot
Copy link

mui-bot commented Jan 6, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-4522--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against 49f5872

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 6, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 7, 2025
@apedroferreira apedroferreira merged commit 16947ae into mui:master Jan 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@apedroferreira apedroferreira apedroferreira approved these changes

Assignees

@apedroferreira apedroferreira

Labels

scope: toolpad-core Abbreviated to "core" type: bug It doesn't behave as expected.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[DashboardLayout] No CSS transitions in persistent sidebar under certain screen width

4 participants

@gil-obradors @Janpot @apedroferreira @mui-bot