added menu animation

src/features/menu/Menu.css

@@ -1,4 +1,6 @@
-.menu {
+.menu,
+.menu-true,
+.menu-false {
     position: absolute;
     background: white;
     display: flex;
@@ -12,10 +14,21 @@
     min-width: 100vw;
 }
 
-.scale-out-tl {
-    -webkit-animation: scale-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53)
-        both;
-    animation: scale-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+.menu-false {
+    left: -100vw;
+}
+
+.menu-true-animation {
+    -webkit-animation: scale-in-out-tl 0.3s
+        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+    animation: scale-in-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+.menu-false-animation {
+    -webkit-animation: scale-in-out-tl 0.3s
+        cubic-bezier(0.55, 0.085, 0.68, 0.53) reverse both;
+    animation: scale-in-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53)
+        reverse both;
 }
 
 /* ----------------------------------------------
@@ -30,7 +43,7 @@
  * animation scale-out-tl
  * ----------------------------------------
  */
-@-webkit-keyframes scale-out-tl {
+@-webkit-keyframes scale-in-out-tl {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
@@ -38,15 +51,20 @@
         transform-origin: 0 0;
         opacity: 1;
     }
-    100% {
+    75% {
         -webkit-transform: scale(0);
         transform: scale(0);
         -webkit-transform-origin: 0 0;
         transform-origin: 0 0;
         opacity: 1;
     }
+    100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+        opacity: 1;
+    }
 }
-@keyframes scale-out-tl {
+@keyframes scale-in-out-tl {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
@@ -54,13 +72,18 @@
         transform-origin: 0 0;
         opacity: 1;
     }
-    100% {
+    75% {
         -webkit-transform: scale(0);
         transform: scale(0);
         -webkit-transform-origin: 0 0;
         transform-origin: 0 0;
         opacity: 1;
     }
+    100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+        opacity: 1;
+    }
 }
 
 .menu-logo {

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>
     );