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!