front_directorio/src/components/NavUsuarios/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';

const Menu = () => {
  const permissions = Guard();
  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;
      
      setUsuario(user);

    };
    jwtPermissions();
  }, []);

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

  return (
    <nav className="navbar navbar-dark bg-dark fixed-top">
      <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">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">
                <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>
              {permissions === 1 && (
                <>
                <li className="nav-item">
                  <a className="nav-link" onClick={() => window.location.href= PrivateRoutes.CREARUSUARIO}>Crear Usuario</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" onClick={() => window.location.href=PrivateRoutes.FILTERUSUARIO}>Editar Usuario</a>
                </li>
              </>
              )}
              <li className="nav-item">
                <button className="nav-link btn btn-link" onClick={handleLogout}>Cerrar Sesión</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  );
}

export default Menu;