fixed error of edit and style

src/components/Nav/Menu.css

@@ -14,7 +14,7 @@
 }
 
 .navbar-dark .nav-link {
-  color: #ffffff;
+  color: white !important;
 }
 
 .navbar-dark .nav-link:hover {
@@ -29,13 +29,10 @@
   background-color: #333333;
 }
 
-.offcanvas-body .nav-link {
-  color: #ffffff;
-}
-
 .offcanvas-body .nav-link:hover {
   color: #cccccc;
 }
+
 .navbar-toggler {
   border-radius: 8px;
   padding: 0.25rem 0.75rem;
@@ -43,4 +40,16 @@
 
 .ms-auto {
   margin-left: auto;
+}
+
+.red{
+  background-color: rgb(193, 17, 17);
+  color: white;
+  text-decoration: none;
+}
+
+.container{
+  border: 2px solid rgb(77, 77, 77);
+  border-radius: 8px;
+  margin: 10px;
 }

src/components/Nav/Menu.js

@@ -8,6 +8,7 @@ import JwtGuard from "../../guards/jwt.guard";
 const Menu = () => {
   JwtGuard();
   const permissions = Guard();
+  const [id, setId] = useState(null);
   const [usuario, setUsuario] = useState(null);
 
   useEffect(() => {
@@ -21,7 +22,9 @@ const Menu = () => {
       const parts = jwtToken.split(".");
       const decodedPayload = JSON.parse(atob(parts[1]));
       const user = decodedPayload.usuario;
+      const id = decodedPayload.id_usuario;
 
+      setId(id);
       setUsuario(user);
     };
     jwtPermissions();
@@ -60,7 +63,11 @@ const Menu = () => {
           aria-labelledby="offcanvasNavbarLabel"
         >
           <div className="offcanvas-header">
-            <h5 className="offcanvas-title" id="offcanvasNavbarLabel">
+            <h5
+              className="offcanvas-title"
+              id="offcanvasNavbarLabel"
+              onClick={() => (window.location.href = PrivateRoutes.INTERFACE)}
+            >
               Menú
             </h5>
             <button
@@ -73,25 +80,40 @@ const Menu = () => {
           <div className="offcanvas-body">
             <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
               <li className="nav-item">
-                <a
+                <h4
                   className="nav-link"
                   onClick={() =>
-                    (window.location.href = PrivateRoutes.CREARPROFESOR)
+                    (window.location.href = `${PrivateRoutes.DATAUSUARIO}${id}`)
                   }
                 >
-                  Crear Profesor
-                </a>
-              </li>
-              <li className="nav-item">
-                <a
-                  className="nav-link"
-                  onClick={() => (window.location.href = PublicRoutes.FILTER)}
-                >
-                  Editar Profesor
-                </a>
+                  Perfil
+                </h4>
               </li>
+
+              <div className="container">
+                <li className="nav-item">
+                  <a
+                    className="nav-link"
+                    onClick={() =>
+                      (window.location.href = PrivateRoutes.CREARPROFESOR)
+                    }
+                  >
+                    Crear Profesor
+                  </a>
+                </li>
+
+                <li className="nav-item">
+                  <a
+                    className="nav-link"
+                    onClick={() => (window.location.href = PublicRoutes.FILTER)}
+                  >
+                    Editar Profesor
+                  </a>
+                </li>
+              </div>
+
               {permissions === 1 && (
-                <>
+                <div className="container">
                   <li className="nav-item">
                     <a
                       className="nav-link"
@@ -112,13 +134,10 @@ const Menu = () => {
                       Editar Usuario
                     </a>
                   </li>
-                </>
+                </div>
               )}
               <li className="nav-item">
-                <button
-                  className="nav-link btn btn-link"
-                  onClick={handleLogout}
-                >
+                <button className=" btn red" onClick={handleLogout}>
                   Cerrar Sesión
                 </button>
               </li>