Toggle finalizado sem estilização

src/components/Sidebar.jsx

@@ -2,6 +2,15 @@ import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import TrocardePerfis from "./TrocardePerfis";
 import MobileMenuToggle from "./MobileMenuToggle";
+import ToggleSidebar from "./ToggleSidebar";
+import { useAuth } from "./utils/AuthProvider";
+
+import PacienteItems from "../data/sidebar-items-paciente.json"
+import DoctorItems from "../data/sidebar-items-medico.json"
+import admItems from "../data/sidebar-items-adm.json"
+import SecretariaItems from "../data/sidebar-items-secretaria.json"
+
+import { UserInfos } from "./utils/Functions-Endpoints/General";
 
 function Sidebar({ menuItems }) {
   const [isActive, setIsActive] = useState(true);
@@ -10,6 +19,16 @@ function Sidebar({ menuItems }) {
   const [showLogoutModal, setShowLogoutModal] = useState(false);
   const navigate = useNavigate();
 
+  const [roleUser, setRoleUser] = useState([])
+
+  const {getAuthorizationHeader} = useAuth();
+
+  const authHeader = getAuthorizationHeader();
+
+
+
+
+
   // Detecta se é mobile/tablet
   useEffect(() => {
     const checkScreenSize = () => {
@@ -18,6 +37,15 @@ function Sidebar({ menuItems }) {
       setIsActive(!mobile);
     };
 
+    const fetchInfoUser = async () => {
+      const InfoUser = await UserInfos(authHeader);
+      console.log(InfoUser.roles, "dados")
+
+      setRoleUser(InfoUser.roles)
+   }
+
+   fetchInfoUser()
+
     checkScreenSize();
     window.addEventListener("resize", checkScreenSize);
     return () => window.removeEventListener("resize", checkScreenSize);
@@ -89,8 +117,16 @@ function Sidebar({ menuItems }) {
     }
   };
 
+  useEffect(() => {
+    if(roleUser.includes("admin")){
+      console.log("tem")
+    }
+    console.log(roleUser)
+  }, [roleUser])
+
   const handleLogoutCancel = () => setShowLogoutModal(false);
 
+
   const renderLink = (item) => {
     if (item.url && item.url.startsWith("/")) {
       return (
@@ -213,52 +249,25 @@ function Sidebar({ menuItems }) {
 
           <div className="sidebar-menu">
             <ul className="menu">
-              {menuItems &&
-                menuItems.map((item, index) => {
-                  if (item.isTitle)
-                    return (
-                      <li key={index} className="sidebar-title">
-                        {item.name}
-                      </li>
-                    );
 
-                  if (item.submenu)
+              {roleUser.includes("admin") &&
-                    return (
+              <ToggleSidebar perfil={"administrador"} items={admItems}/>
-                      <li
+              }
-                        key={index}
+              {roleUser.includes("admin") || roleUser.includes("secretaria") ?
-                        className={`sidebar-item has-sub ${
+              <ToggleSidebar perfil={"secretaria"} items={SecretariaItems}/>
-                          openSubmenu === item.key ? "active" : ""
+              :
-                        }`}
+              null
-                      >
+              }
-                        <button
-                          type="button"
-                          className="sidebar-link btn"
-                          onClick={() => handleSubmenuClick(item.key)}
-                        >
-                          <i className={`bi bi-${item.icon}`}></i>
-                          <span>{item.name}</span>
-                        </button>
-                        <ul
-                          className={`submenu ${
-                            openSubmenu === item.key ? "active" : ""
-                          }`}
-                        >
-                          {item.submenu.map((subItem, subIndex) => (
-                            <li key={subIndex} className="submenu-item">
-                              {renderLink(subItem)}
-                            </li>
-                          ))}
-                        </ul>
-                      </li>
-                    );
 
-                  return (
+              {roleUser.includes("admin") || roleUser.includes("medico") ?
-                    <li key={index} className="sidebar-item">
+              <ToggleSidebar perfil={"medico"} items={DoctorItems}/>
-                      {renderLink(item)}
+              :null
-                    </li>
+              }
-                  );
-                })}
 
+              {roleUser.includes("admin") || roleUser.includes("paciente") ? 
+              <ToggleSidebar perfil={"paciente"} items={PacienteItems}/>
+              : null
+              }
               {/* Logout */}
               <li className="sidebar-item">
                 <button

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -24,7 +24,7 @@ function PerfilSecretaria({ onLogout }) {
   return (
     // <Router>
       <div id="app" className="active">
-        <Sidebar onLogout={onLogout} menuItems={SecretariaItems} />
+        <Sidebar onLogout={onLogout} />
         <div id="main">
           <Routes>
             <Route path="/" element={<Inicio/>}/>