I created a React app that uses a sidebar that is supposed to ease-in-out, but it doesn't. It just pops in while successfully pushing the content to the right, and pops out when clicked again.

The code uses

  transition: transform 0.3s ease-in-out; 
  transform: translateX(-250px);

to move the sidebar on and off canvas. But it doesn't seem to be working in the sandbox example. It does work in my real app, but not animated.

Here's a pic that shows expanded

This one shows it collapsed:

Notice that the sidebar is all white. I can't get it to be a different color.

I've looked at many other examples but they all have issues that I don't like. I want the button to remain in place when the tray below it slides in and out. Most examples push the header over too, which requires you to move the mouse over to a different spot to close it.

I'd also like the user to have the option of having the sidebar close after selection, or remain open.

I've created a small sandbox example. I ported a snipped from the main app, but now the content goes under the menu instead of to the right of it. I hope one of you experts can show me what I'm missing!

I created a React app that uses a sidebar that is supposed to ease-in-out, but it doesn't. It just pops in while successfully pushing the content to the right, and pops out when clicked again.

The code uses

  transition: transform 0.3s ease-in-out; 
  transform: translateX(-250px);

to move the sidebar on and off canvas. But it doesn't seem to be working in the sandbox example. It does work in my real app, but not animated.

Here's a pic that shows expanded

This one shows it collapsed:

Notice that the sidebar is all white. I can't get it to be a different color.

I've looked at many other examples but they all have issues that I don't like. I want the button to remain in place when the tray below it slides in and out. Most examples push the header over too, which requires you to move the mouse over to a different spot to close it.

I'd also like the user to have the option of having the sidebar close after selection, or remain open.

I've created a small sandbox example. I ported a snipped from the main app, but now the content goes under the menu instead of to the right of it. I hope one of you experts can show me what I'm missing!

• javascript
• html
• css
• reactjs
• material-ui

• Seems you have a styling issue. What version of MUI are you using? – HeavenlyEntity Commented Apr 2 at 5:41

1 Answer 1

Moving your Sidebar component outside of MainAppBar component and passing isSidebarOpen state through props will make the transitions smooth.

When Sidebar is inside MainAppBar, state change of isSidebarOpen cause a full re-render of Sidebar component.

After moving Sidebar outside of MainAppBar and passing isSidebarOpen through props, only isSidebarOpen changes inside Sidebar.