added menu animation

src/features/menu/Menu.js

@@ -5,16 +5,33 @@ import logo from '../../1f3b9.svg';
 import './Menu.css';
 
 export default function MainMenu(props) {
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState({
+        className: '',
+        openState: true,
+    });
     const dispatch = useDispatch();
 
     const HandleClick = () => {
-        setOpen(!open);
+        setOpen({
+            className: open.openState
+                ? 'menu-true-animation'
+                : 'menu-false-animation',
+            openState: !open.openState,
+        });
+    };
+
+    const AnimationEnd = () => {
+        setOpen({
+            ...open,
+            className: `menu-${open.openState}`,
+        });
     };
 
     return (
         <div>
-            <div className={open ? 'menu' : 'menu scale-out-tl'}>
+            <div
+                className={`menu ${open.className}`}
+                onAnimationEnd={AnimationEnd}>
                 <img src={logo} className="menu-logo" alt="logo" />
                 <header className="menu-title">Alapatch</header>
                 <div className="menu-button-container">
@@ -29,12 +46,8 @@ export default function MainMenu(props) {
                     <button className="menu-button">Load Patch</button>
                 </div>
             </div>
-            {!open && (
-                <button
-                    className="menu-open-button"
-                    onClick={HandleClick}
-                    onAnimationEnd={() => setOpen(!open)}
-                />
+            {!open.openState && (
+                <button className="menu-open-button" onClick={HandleClick} />
             )}
         </div>
     );