front_directorio/src/components/Nav/Menu.js

import React from "react";
import { PrivateRoutes, PublicRoutes } from "../../models/routes";
import { useEffect, useState } from "react";
import Guard from "../../guards/route.guard";
import "./Menu.css";
import JwtGuard from "../../guards/jwt.guard";

const Menu = () => {
  JwtGuard();
  const permissions = Guard();
  const [id, setId] = useState(null);
  const [usuario, setUsuario] = useState(null);

  useEffect(() => {
    const jwtPermissions = () => {
      const jwtToken = localStorage.getItem("Token");
      if (!jwtToken) {
        console.error("No se encontró el token en localStorage");
        return;
      }

      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();
  }, []);

  const handleLogout = () => {
    localStorage.removeItem("Token");
    window.location.href = PublicRoutes.LOGIN;
  };

  return (
    <nav className="navbar navbar-dark bg-dark">
      <div className="container-fluid">
        <div className="d-flex ">
          <button
            className="navbar-toggler me-3"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasNavbar"
            aria-controls="offcanvasNavbar"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="navbar-brand ms-auto">
            <span>{usuario}</span> <span className="separator">- </span>
            {permissions === 1 && <span>Administrador</span>}
            {permissions === 2 && <span>Responsable</span>}
          </div>
        </div>
        <div
          className="offcanvas offcanvas-end"
          tabIndex="-1"
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
        >
          <div className="offcanvas-header">
            <h5
              className="offcanvas-title"
              id="offcanvasNavbarLabel"
              onClick={() => (window.location.href = PrivateRoutes.INTERFACE)}
            >
              Menú
            </h5>
            <button
              type="button"
              className="btn-close"
              data-bs-dismiss="offcanvas"
              aria-label="Close"
            ></button>
          </div>
          <div className="offcanvas-body">
            <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
              <li className="nav-item">
                <h4
                  className="nav-link"
                  onClick={() =>
                    (window.location.href = `${PrivateRoutes.DATAUSUARIO}${id}`)
                  }
                >
                  Perfil
                </h4>
              </li>

              <div className="container">
                <li className="nav-item">
                  <button
                    className="nav-link notButton"
                    onClick={() =>
                      (window.location.href = PrivateRoutes.CREARPROFESOR)
                    }
                  >
                    Crear Profesor
                  </button>
                </li>

                <li className="nav-item">
                  <button
                    className="nav-link  notButton"
                    onClick={() => (window.location.href = PublicRoutes.FILTER)}
                  >
                    Editar Profesor
                  </button>
                </li>
              </div>

              {permissions === 1 && (
                <div className="container">
                  <li className="nav-item">
                    <button
                      className="nav-link  notButton"
                      onClick={() =>
                        (window.location.href = PrivateRoutes.CREARUSUARIO)
                      }
                    >
                      Crear Usuario
                    </button>
                  </li>
                  <li className="nav-item">
                    <button
                      className="nav-link  notButton"
                      onClick={() =>
                        (window.location.href = PrivateRoutes.FILTERUSUARIO)
                      }
                    >
                      Editar Usuario
                    </button>
                  </li>
                </div>
              )}
              <li className="nav-item">
                <button className=" btn red" onClick={handleLogout}>
                  Cerrar Sesión
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Menu;