So I have a Navbar.js component and a Menu.js component. I have a state called showMenu in Context API. Every time the Navbar's hamburger menu is clicked, this context state is set to true or false. Then in the Menu.js JSX, I only render it if the showMenu state is true. This works beautifully and with the state in context, I can now import the Navbar in any page and it always has access to the showMenu state.
My problem is that the animation (sliding in from left) only shows when the state is set to true. When the state is set to false, it just disappears.
I realize why this happens. When the DOM rerenders and the state is true, its gonna display the menu with its animation. When it rerenders and the state is false, it won't render anything.
Should I abandon this method (and if so, what's a better way to do this?) or is there a way to make it work?
