dropdownroutes

src/components/TrocardePerfis.jsx

@@ -1,82 +1,60 @@
-import {React, useState, useEffect} from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { UserInfos } from './utils/Functions-Endpoints/General';
-import { useAuth } from './utils/AuthProvider';
-import './Estilo/TrocardePerfis.css'
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { UserInfos } from "./utils/Functions-Endpoints/General";
+import { useAuth } from "./utils/AuthProvider";
+import "./Estilo/TrocardePerfis.css";
 
 const TrocardePerfis = () => {
   const location = useLocation();
-   
-  const [selectedProfile, setSelectedProfile] = useState('');
-  const { getAuthorizationHeader } = useAuth();
-  const [showProfiles, setShowProfiles] = useState([]);
   const navigate = useNavigate();
+  const { getAuthorizationHeader } = useAuth();
 
-  let authHeader = getAuthorizationHeader();
-  console.log('AUTH HEADER', authHeader)
+  const [selectedProfile, setSelectedProfile] = useState("");
+  const [showProfiles, setShowProfiles] = useState([]);
 
-
-const handleProfileClick = (route) => {
- 
-  navigate(route);
-};
-
-
-useEffect(() => {
+  useEffect(() => {
     const fetchData = async () => {
-    setSelectedProfile(location.pathname);
+      const authHeader = getAuthorizationHeader();
+      setSelectedProfile(location.pathname || "");
       const userInfo = await UserInfos(authHeader);
       setShowProfiles(userInfo?.roles || []);
     };
-
     fetchData();
-}, []);
+  }, [location.pathname, getAuthorizationHeader]);
+
+  const handleSelectChange = (e) => {
+    const route = e.target.value;
+    setSelectedProfile(route);
+    if (route) navigate(route);
+  };
+
+  const options = [
+    { key: "secretaria", label: "Secretaria", route: "/secretaria" },
+    { key: "medico", label: "Médico", route: "/medico" },
+    { key: "financeiro", label: "Financeiro", route: "/financeiro" },
+    { key: "admin", label: "Administração", route: "/admin" },
+  ].filter(
+    (opt) =>
+      showProfiles?.includes(opt.key) || showProfiles?.includes("admin")
+  );
 
   return (
-    
-    <div className='container-perfis'>
-
-      <p>Acesso aos modulos:</p>
-    <div id='primeiro-conjunto-botoes'>
-  {(showProfiles?.includes('secretaria') || showProfiles?.includes('admin')) && (
-    <button
-      className={`perfil-button${selectedProfile === '/secretaria' ? ' selecionado' : ''}`}
-      onClick={() => handleProfileClick('/secretaria')}
+    <div className="container-perfis">
+      <p className="acesso-text">Acesso aos módulos:</p>
+      <select
+        className="perfil-select"
+        value={selectedProfile}
+        onChange={handleSelectChange}
       >
-      Secretaria
-    </button>
-  )}
-  {(showProfiles?.includes('medico') || showProfiles?.includes('admin')) && (
-    <button
-      className={`perfil-button${selectedProfile === '/medico' ? ' selecionado' : ''}`}
-      onClick={() => handleProfileClick('/medico')}
-    >
-      Médicos
-    </button>
-  )}
-</div>
-
-<div id='segundo-conjunto-botoes'>
-  {(showProfiles?.includes('financeiro') || showProfiles?.includes('admin')) && (
-    <button
-      className={`perfil-button${selectedProfile === '/financeiro' ? ' selecionado' : ''}`}
-      onClick={() => handleProfileClick('/financeiro')}
-    >
-      Financeiro
-    </button>
-  )}
-  {showProfiles?.includes('admin') && (
-    <button
-
-      className={`perfil-button${selectedProfile === '/admin' ? ' selecionado' : ''}`}
-      onClick={() => handleProfileClick('/admin')}
-    >
-      Administração
-    </button>
-  )}
-</div>
+        <option value="">Selecionar perfil</option>
+        {options.map((opt) => (
+          <option key={opt.key} value={opt.route}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
     </div>
-  )
-}
+  );
+};
 
-export default TrocardePerfis
+export default TrocardePerfis;

src/pages/style/TrocardePerfil.css

@@ -0,0 +1,62 @@
+.container-perfis {
+  position: absolute;
+  top: 80px;
+  left: 30px;
+  width: calc(100% - 60px);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 60;
+}
+
+.acesso-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e2b57;
+  margin-bottom: 6px;
+}
+
+/* estilo visual refinado do select */
+.perfil-select {
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1.8px solid #d0d5dd;
+  background-color: #f9fafc;
+  color: #1e2b57;
+  font-weight: 600;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(30, 43, 87, 0.08);
+}
+
+.perfil-select:hover {
+  border-color: #7a85ff;
+  background-color: #ffffff;
+  box-shadow: 0 2px 6px rgba(30, 43, 87, 0.1);
+}
+
+.perfil-select:focus {
+  border-color: #5a46ff;
+  box-shadow: 0 0 0 3px rgba(90, 70, 255, 0.2);
+}
+
+.perfil-select option[value=""] {
+  color: #777;
+  font-weight: 500;
+}
+
+/* responsivo */
+@media (max-width: 780px) {
+  .container-perfis {
+    top: 60px;
+    left: 20px;
+    width: calc(100% - 40px);
+  }
+  .perfil-select {
+    font-size: 13px;
+    padding: 8px 12px;
+  }
+}