Which component(s) are affected?

Navigation drawer

Description

When implementing a simple layout with a navigation drawer that supports both standard and mini variants, along with a toggle button to switch between them, we encountered an issue. Specifically, when the drawer’s position is set to relative, a visual glitch occurs: pressing the toggle button causes the drawer to instantly switch to the mini variant before it begins sliding to the left, resulting in a noticeable "jump" effect.

Reproduction

1. Create a layout that includes a navigation drawer with both normal and mini variants.
2. Set the drawer’s position to relative.
3. Add a toggle button to switch between the two drawer variants.
4. Launch the application and toggle the drawer state using the button.
5. Observe the animation when switching from normal to mini variant.

Here is a sample
https://codesandbox.io/p/sandbox/unruffled-hopper-7qkdcp

Workaround

NO

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

ALL

Browser/OS/Node environment

Broser: ALL
OS: ALL