displaying user info

BananasDev0 · Jul 14, 2024 · e2854e1 · e2854e1
1 parent d7c8f92
commit e2854e1
Showing 1 changed file with 29 additions and 13 deletions.
diff --git a/src/components/CustomToolBar.jsx b/src/components/CustomToolBar.jsx
@@ -1,21 +1,29 @@
-import { useState } from 'react';
-import { Toolbar, IconButton, Typography, Menu, MenuItem } from "@mui/material";
+import { useState, useEffect } from 'react';
+import { Toolbar, IconButton, Typography, Menu, MenuItem, Box, Divider } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import AccountCircle from "@mui/icons-material/AccountCircle";
 import Logo from '../assets/IMAGEN SIN FONDO CIRCULO.png';
 import { auth } from '../services/Firebase/firebase';
 
-
 export default function CustomToolBar({ handleDrawerOpen, open }) {
   const [anchorEl, setAnchorEl] = useState(null);
+  const [userName, setUserName] = useState('');
+  const [userRole, setUserRole] = useState('');
+
+  useEffect(() => {
+    const userInfo = JSON.parse(localStorage.getItem('user'));
+    if (userInfo) {
+      setUserName(userInfo.person.name);
+      setUserRole(userInfo.role.description);
+    }
+  }, []);
 
   const handleProfileMenuOpen = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
   const handleMenuClose = () => {
     setAnchorEl(null);
-
   };  
 
   const handleLogOut = () => {
@@ -35,7 +43,7 @@ export default function CustomToolBar({ handleDrawerOpen, open }) {
         onClick={handleDrawerOpen}
         edge="start"
         sx={{
-          marginRight: '36px', // Aumentado para evitar que el menú y el botón estén demasiado juntos
+          marginRight: '36px',
           ...(open && { display: "none" }),
         }}
       >
@@ -44,7 +52,7 @@ export default function CustomToolBar({ handleDrawerOpen, open }) {
       <img
         src={Logo}
         alt='Logotipo Refaccionaria Diaz'
-        style={{ width: 50, height: 'auto', marginBottom: 10,marginRight:10,marginTop:10 }}
+        style={{ width: 50, height: 'auto', marginBottom: 10, marginRight: 10, marginTop: 10 }}
       />
       <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
         Radiadorez Diaz
@@ -57,11 +65,9 @@ export default function CustomToolBar({ handleDrawerOpen, open }) {
         aria-haspopup="true"
         onClick={handleProfileMenuOpen}
         color="inherit"
-        sx={{
-          fontSize: '2rem', // Esto cambiará el tamaño del botón. Ajusta según sea necesario.
-        }}
+        sx={{ fontSize: '2rem' }}
       >
-        <AccountCircle sx={{ fontSize: '2rem' }} /> {/* Ajusta el tamaño del ícono aquí */}
+        <AccountCircle sx={{ fontSize: '2rem' }} />
       </IconButton>
       <Menu
         id="menu-appbar"
@@ -78,9 +84,19 @@ export default function CustomToolBar({ handleDrawerOpen, open }) {
         open={Boolean(anchorEl)}
         onClose={handleMenuClose}
       >
-        <MenuItem>Ver perfil</MenuItem>
-        <MenuItem onClick={handleLogOut}>Cerrar sesión</MenuItem>
+        <Box sx={{ px: 3, py: 2, textAlign: 'center' }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>
+            {userName}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+            {userRole}
+          </Typography>
+        </Box>
+        <Divider />
+        <MenuItem onClick={handleLogOut} sx={{ justifyContent: 'center', mt: 1 }}>
+          Cerrar sesión
+        </MenuItem>
       </Menu>
     </Toolbar>
   );
-}
+}