From 899bad884efd0fd9acea03a802cf51d6b7ad436e Mon Sep 17 00:00:00 2001
From: Jonas Gabriel <jonasftw2222@gmail.com>
Date: Fri, 8 Dec 2023 15:09:23 -0300
Subject: [PATCH] menu dynamic opening and closing

---
 package-lock.json            |  1 +
 package.json                 |  1 +
 src/components/menu/menu.css | 17 +++++++++
 src/components/menu/menu.tsx | 70 ++++++++++++++++++++----------------
 4 files changed, 59 insertions(+), 30 deletions(-)
 create mode 100644 src/components/menu/menu.css

diff --git a/package-lock.json b/package-lock.json
index 7c00329b..370a9a18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,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"
       },
diff --git a/package.json b/package.json
index 9068f09a..70ef1edd 100644
--- a/package.json
+++ b/package.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"
   },
diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css
new file mode 100644
index 00000000..dfd925e8
--- /dev/null
+++ b/src/components/menu/menu.css
@@ -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;
+  }
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 26e644e5..80909f62 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -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>
+    </>
   );
 }