add basic menu

src/features/menu/Menu.css

@@ -8,12 +8,54 @@
   z-index: 9999;
 }
 
-@keyframes sweep {
+.scale-out-tl {
+  -webkit-animation: scale-out-tl 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
+    both;
+  animation: scale-out-tl 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2020-11-21 14:21:54
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-out-tl
+ * ----------------------------------------
+ */
+@-webkit-keyframes scale-out-tl {
   0% {
-    transform: translate(0, 0);
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    opacity: 1;
   }
   100% {
-    transform: translate(-100%, -100%);
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+}
+@keyframes scale-out-tl {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    opacity: 1;
   }
 }
 

src/features/menu/Menu.js

@@ -11,7 +11,7 @@ export default function MainMenu(props) {
 
   return (
     <div>
-      <div className={`menu menu-${open}`}>
+      <div className={open ? 'menu menu-true' : 'menu menu-false scale-out-tl'}>
         <img src={logo} className="menu-logo" alt="logo" />
         <header className="menu-title">Alapatch</header>
         <div className="menu-button-container">
@@ -22,7 +22,11 @@ export default function MainMenu(props) {
         </div>
       </div>
       {!open && (
-        <button className="menu-open-button" onClick={HandleClick}></button>
+        <button
+          className="menu-open-button"
+          onClick={HandleClick}
+          onAnimationEnd={() => setOpen(!open)}
+        />
       )}
     </div>
   );