fet: show avatar, user name and logout

src/components/AppHeader.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import fendiLogo from '/favicon.png'
-import { AppBar, Toolbar, Typography, InputBase, IconButton, Box, Avatar} from '@mui/material';
+import { AppBar, Toolbar, Typography, InputBase, IconButton, Box, Avatar } from '@mui/material';
 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>