I am currently working on a sidebar menu with a button that toggles its visibility. However, I am struggling to implement a sliding animation from the left when the sidebar appears, and a slide back to the right when it closes.
This is what my code looks like at the moment:
const myClass = clsx({
'transition duration-300 h-screen mt-5 fixed z-10 left-0 w-80 ': true,
'opacity-0': open,
'opacity-100': !open
});
....
return (
<div className='w-8 h-8'>
<button onClick={toggleSideBar}></button>
<div className={containerClasses}>
...
</div>
</div>
);
I have tried to incorporate the isOpened state into the code to control the animation using Tailwind's transition property. Unfortunately, I have not been successful in getting it to work.