I have a simple MUI Drawer which requires some animation on it's expanding and collapsing.
The collapsed state should just be an icon, while the expanded state is the icon followed by text on it's right, with 22px in between them.
This is what the current animation looks like:
As you can see, it looks quite flaky. I would like the icon to stay put regardless of the animation state. Upon expanding, the text shows up as the Drawer expands into it, and just disappears once it's off of screen during the collapse.
How can I achieve this?
Here is the demo of the app with styles and transitions I currently have:
https://codesandbox.io/s/crimson-fast-qll47?file=/src/App.js