feat: show used connected

src/components/AppHeader.jsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import fendiLogo from '/favicon.png'
-import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } 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';
 
 export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
@@ -14,6 +15,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   };
 
   const [menuOpen, setMenuOpen] = useState(false);
+  const { user, logout } = useAuth();
 
   const isPrivate = zone === 'private';
   const isRestricted = zone === 'restricted';
@@ -53,7 +55,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         )}
 
         {/* Login button only visible for public zone */}
-        {isPublic && (
+        {isPublic && !user && (
           <Box>
             <IconButton color="inherit">
               <Typography variant="button" color="#A68A72FF">
@@ -63,6 +65,13 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           </Box>
         )}
 
+        {user && (
+          <Box display="flex" alignItems="center" gap={2}>
+            <Typography variant="body1">{user.name}</Typography>
+            <Avatar alt={user.name} src={user.picture} />
+          </Box>
+        )}
+
         {/* Rendering the Drawer */}
         <MenuDrawer
           zone="private"