Search code examples
reactjsmaterial-uinavigation-drawer

ReactJS MUI 5 how to add transition to an opening/closing drawer

Uisng this as a reference I've created a collapsible drawer that shrinks the content area next to it. Here is the codesandbox. My question is how to add a smooth transition as in this example but not using styled. I tried with something like in the codesandbox, but it does weird things.

Solution

  • What you want is Drawer variant persistent.

    Change line #53 from this

    variant={openDrawer ? "permanent" : "temporary"}

    to this:

    variant="persistent"

    That's the only line I changed and it works really well now.