chore: fix header and add icons

src/components/AppHeader.jsx

@@ -8,12 +8,13 @@ import { useNavigate } from 'react-router-dom';
 export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
   const bgColor = {
-    public: '#40120EFF',
-    restricted: '#40120EFF',
-    private: '#40120EFF',
+    public: 'white',
+    restricted: 'white',
+    private: 'white',
   };
 
   const [drawerExpanded, setDrawerExpanded] = useState(true);
+  const [currentPage, setCurrentPage] = useState('Dashboard'); // track current page
   const { user, logout } = useAuth();
 
   const isPrivate = zone === 'private';
@@ -22,6 +23,13 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
   const navigate = useNavigate();
 
+  const handleMenuSelect = (page) => {
+    setCurrentPage(page);     // update page title
+    onSelectMenuItem?.(page); // still notify parent
+    // you can also navigate if you have routes:
+    // navigate(`/${page.toLowerCase().replace(/\s+/g, '-')}`);
+  };
+
   return (
     <AppBar position="static"
       sx={{
@@ -32,30 +40,29 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
       }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
 
-        {/* Login button only visible for public zone */}
-        {isPublic && !user && (
-          <Box>
-            <IconButton color="inherit" onClick={() => navigate('/login')}>
-              <Typography variant="button" color="#A68A72FF">
-                Login
-              </Typography>
-            </IconButton>
-          </Box>
-        )}
+        {/* LEFT SIDE: Current Page */}
+        <Typography
+          variant="h6"
+          noWrap
+          sx={{ color: '#40120EFF', fontWeight: 600 }}
+        >
+          {currentPage}
+        </Typography>
 
+        {/* RIGHT SIDE: User Info */}
         {user && (
-          <Box display="flex" alignItems="center" gap={2}>
-            <Typography variant="body1">{user.name}</Typography>
+          <Box display="flex" alignItems="center" gap={1}>
             <Avatar alt={user.name} src={user.picture} />
+            <Typography variant="body1" color='#40120EFF'>{user.name}</Typography>
           </Box>
         )}
 
-        {/* Rendering the Drawer */}
+        {/* Drawer (hidden off canvas, just keeps logic) */}
         <MenuDrawer
           zone="private"
           open={drawerExpanded}
           onClose={() => setDrawerExpanded(false)}
-          onSelect={onSelectMenuItem} // pass handler from App
+          onSelect={handleMenuSelect} // patched
         />
 
       </Toolbar>