Merge branch 'toggleSidebar' of https://git.popcode.com.br/RiseUP/riseup-squad23

src/components/Estilo/Toggle.css

@@ -0,0 +1,9 @@
+.toggle-title{
+    color:#25396f;
+    font-weight: 1000;
+    font-size: 20px;
+}
+
+.container-title{
+    display: flex;
+}

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)
-                    return (
-                      <li
-                        key={index}
-                        className={`sidebar-item has-sub ${
-                          openSubmenu === item.key ? "active" : ""
-                        }`}
-                      >
-                        <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>
-                    );
+              {roleUser.includes("admin") &&
+              <ToggleSidebar perfil={"administrador"} items={admItems}/>
+              }
+              {roleUser.includes("admin") || roleUser.includes("secretaria") ?
+              <ToggleSidebar perfil={"secretaria"} items={SecretariaItems}/>
+              :
+              null
+              }
 
-                  return (
-                    <li key={index} className="sidebar-item">
-                      {renderLink(item)}
-                    </li>
-                  );
-                })}
+              {roleUser.includes("admin") || roleUser.includes("medico") ?
+              <ToggleSidebar perfil={"medico"} items={DoctorItems}/>
+              :null
+              }
 
+              {roleUser.includes("admin") || roleUser.includes("paciente") ? 
+              <ToggleSidebar perfil={"paciente"} items={PacienteItems}/>
+              : null
+              }
               {/* Logout */}
 
               <TrocardePerfis />

src/components/ToggleSidebar.jsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import {useState} from 'react'
+import { Link } from 'react-router-dom'
+import "./Estilo/Toggle.css"
+
+const ToggleSidebar = ({perfil, items}) => {
+    const [isOpen, setOpen] = useState(false)
+
+    const [openSubmenu, setOpenSubmenu] = useState(null);
+
+    console.log(items)
+
+     const renderLink = (item) => {
+    if (item.url && item.url.startsWith("/")) {
+      return (
+        <Link to={item.url} className="sidebar-link">
+          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+          <span>{item.name}</span>
+        </Link>
+      );
+    }
+    return (
+      <a href={item.url} className="sidebar-link" target="_blank" rel="noreferrer">
+        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+        <span>{item.name}</span>
+      </a>
+    );
+  };
+
+    const OpenClose = () => {
+        if(isOpen){
+            setOpen(false)
+        }else if(!isOpen){
+            setOpen(true)
+        }
+    }
+
+  return (
+    <div>
+        <div className='container-title'>
+            <p onClick={() => OpenClose()} className='toggle-title' > {perfil}</p>
+            
+            {isOpen ? <i class="bi bi-caret-down"></i> : <i class="bi bi-caret-left"></i>}
+        </div>
+    {isOpen &&
+    <div>
+        {items.map((item, index) => {
+
+             if (item.isTitle)
+                    return (
+                      <li key={index} className="sidebar-title">
+                        {null}
+                      </li>
+                    );
+
+                  if (item.submenu)
+                    return (
+                      <li
+                        key={index}
+                        className={`sidebar-item has-sub ${
+                          openSubmenu === item.key ? "active" : ""
+                        }`}
+                      >
+                        <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 (
+                    <li key={index} className="sidebar-item">
+                      {renderLink(item)}
+                    </li>
+                  );
+
+})}
+      
+
+    </div>
+    
+
+
+    }
+    </div>
+  )
+}
+
+export default ToggleSidebar

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/>}/>