fet: show avatar, user name and logout

src/components/AppHeader.jsx

@@ -5,6 +5,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import MenuDrawer from './MenuDrawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
 
 export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
@@ -21,6 +22,8 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   const isRestricted = zone === 'restricted';
   const isPublic = zone === 'public';
 
+  const navigate = useNavigate();
+
   return (
     <AppBar position="static"
       sx={{
@@ -57,7 +60,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         {/* Login button only visible for public zone */}
         {isPublic && !user && (
           <Box>
-            <IconButton color="inherit">
+            <IconButton color="inherit" onClick={() => navigate('/login')}>
               <Typography variant="button" color="#A68A72FF">
                 Login
               </Typography>

src/components/MenuDrawer.jsx

@@ -5,6 +5,7 @@ import InventoryIcon from '@mui/icons-material/Inventory';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
+import { useAuth } from '../context/AuthContext';
 
 import { useState } from 'react';
 
@@ -32,6 +33,8 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
   const isMobile = useMediaQuery('(max-width:900px)');
   const items = menuOptions[zone];
 
+  const { logout } = useAuth();
+
   return (
     <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
       paper: {
@@ -56,6 +59,12 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
           <ListItem key={index} onClick={() => {
             onClose(); // Close drawer
             onSelect?.(text); // Notify parent of selected item
+
+            if (text === 'Logout') {
+              logout(); // cerrar sesión y redirigir
+            } else {
+              onSelect?.(text); // navegar al resto de vistas
+            }
           }}>
 
             <ListItemIcon sx={{ color: '#DFCCBCFF' }}>{icon}</ListItemIcon>