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 (
-
+ <>
+
+
+
+
+ >
);
}