menu dynamic opening and closing

Author: jonasgabriel18

package-lock.json

@@ -24,6 +24,7 @@
     "react-papaparse": "^4.1.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
     "serve": "^14.2.1",
     "typescript": "^4.9.5"
   },

package.json

@@ -0,0 +1,17 @@
+.menu-enter {
+    max-width: 0;
+  }
+
+  .menu-enter-active {
+    transition: max-width 700ms;
+    max-width: 100%;
+  }
+
+  .menu-exit {
+    max-width: 100%;
+  }
+
+  .menu-exit-active {
+    transition: max-width 600ms;
+    max-width: 0;
+  }

src/components/menu/menu.css

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { HiOutlineMenu, HiOutlineX } from "react-icons/hi"; // Importando ícones do React Icons
 import { Link } from "react-router-dom";
+import { CSSTransition } from "react-transition-group";
+import "./menu.css";
 
 export function Menu() {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -10,35 +12,43 @@ export function Menu() {
   };
 
   return (
-    <nav
-      className={`text-white fixed top-0 left-0 bottom-0 z-50 overflow-y-auto ${
-        isExpanded ? "bg-gray-800 overflow-y-auto w-64" : "overflow-hidden"
-      }`}
-    >
-      <div className="flex justify-between items-center p-4">
-        <div className={`text-2xl font-bold ${isExpanded ? "" : "sr-only"}`}>
-          Menu
-        </div>
-        <button
-          className="text-white focus:outline-none focus:text-white"
-          onClick={toggleMenu}
-        >
-          {isExpanded ? (
-            <HiOutlineX className="h-6 w-6" />
-          ) : (
-            <HiOutlineMenu className="h-6 w-6" />
-          )}
-        </button>
-      </div>
-      <ul className={`p-4 ${isExpanded ? "" : "hidden"}`}>
-        <li className={`my-2`}>
-          {" "}
-          <Link to="/">Classificar</Link>
-        </li>
-        <li className={`my-2`}>
-          <Link to="/train">Treinar</Link>
-        </li>
-      </ul>
-    </nav>
+    <>
+      <button
+        className="text-white fixed top-0 left-0 p-4 focus:outline-none focus:text-white"
+        onClick={toggleMenu}
+      >
+        {isExpanded ? (
+          <HiOutlineX className="h-6 w-6" />
+        ) : (
+          <HiOutlineMenu className="h-6 w-6" />
+        )}
+      </button>
+      <CSSTransition
+        in={isExpanded}
+        timeout={500}
+        classNames="menu"
+        unmountOnExit
+      >
+        <nav className="text-white fixed top-0 left-0 bottom-0 z-50 overflow-y-auto w-64 bg-gray-800">
+          <div className="p-4 flex justify-between items-center">
+            <div className="text-2xl font-bold">Menu</div>
+            <button
+              className="text-white focus:outline-none p-2"
+              onClick={toggleMenu}
+            >
+              <HiOutlineX className="h-6 w-6" />
+            </button>
+          </div>
+          <ul className="p-4">
+            <li className="my-2">
+              <Link to="/">Classificar</Link>
+            </li>
+            <li className="my-2">
+              <Link to="/train">Treinar</Link>
+            </li>
+          </ul>
+        </nav>
+      </CSSTransition>
+    </>
   );
 }