Se cambia la lógica a un custom hook

import { useState } from "react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faSignOut, faUser } from "@fortawesome/free-solid-svg-icons";

import { useAuth } from "../../context/auth_context";

import { Link } from "react-router-dom";

import './assets/styles/style.css';

import { UserRole } from "../../constants/roles";

import { useAdminNavbar } from "../../hooks/useAdminNavbar";

interface props{

  windowActive: boolean;

}

export const AdminPanelNavBar = ({windowActive}:props) => {

  const {user, logout} = useAuth();

  const [toggle, setToggle] = useState(false);

  const {user, handleLogout, setToggle, toggle, userData} = useAdminNavbar();

  const handleLogout = () => {

    logout();

  };

  if(!user ){

    return null;

  }else{

    if(user.role !== UserRole.ADMIN && user.role !== UserRole.SUPERADMIN){

      return null;

    }

  }

  return (

    <div className="navbar">

          <div className="sub-menu" >

            <div className="user-info">

              <img src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")}/>

              <h3>Superadmin</h3>

              <h3>{userData?.name}</h3>

            </div>

            <hr/>