menu dynamic opening and closing

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"
  },

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

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