chore: add logic to show the current Page and move based on the collapse flag

src/components/AppHeader.jsx

@@ -15,7 +15,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
   const [drawerExpanded, setDrawerExpanded] = useState(true);
   const [currentPage, setCurrentPage] = useState('Dashboard'); // track current page
-  const { user, logout } = useAuth();
+  const { user } = useAuth();
 
   const isPrivate = zone === 'private';
   const isRestricted = zone === 'restricted';
@@ -31,23 +31,45 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   };
 
   return (
-    <AppBar position="static"
+    <AppBar position="fixed"
       sx={{
         textAlign: 'center',
         backgroundColor: bgColor[zone],
-        mt: 'auto',
         fontSize: { xs: '0.75rem', md: '1rem' },
+        boxShadow: '0px 2px 4px rgba(0,0,0,0.1)',
+        border: 'none',
+        width: '100%',
+        left: 0,
+        right: 0,
       }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
 
         {/* LEFT SIDE: Current Page */}
-        <Typography
-          variant="h6"
-          noWrap
-          sx={{ color: '#40120EFF', fontWeight: 600 }}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            ml: `${drawerExpanded ? '300px' : '72px'}`,
+          }}
         >
-          {currentPage}
-        </Typography>
+          <Typography
+            variant="h6"
+            noWrap
+            sx={{ color: '#40120EFF', fontWeight: 600 }}
+          >
+            {currentPage}
+          </Typography>
+        </Box>
+
+        {/* MIDDLE: Icon Buttons */}
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <IconButton sx={{ mx: 1 }}>
+            <img src="/refresh.png" alt="Reload" width={24} height={24} />
+          </IconButton>
+          <IconButton sx={{ mx: 1 }}>
+            <img src="/alert.png" alt="Notifications" width={24} height={24} />
+          </IconButton>
+        </Box>
 
         {/* RIGHT SIDE: User Info */}
         {user && (
@@ -57,12 +79,11 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           </Box>
         )}
 
-        {/* Drawer (hidden off canvas, just keeps logic) */}
+        {/* Drawer (kept here for logic; reports expanded/collapsed to header) */}
         <MenuDrawer
           zone="private"
-          open={drawerExpanded}
-          onClose={() => setDrawerExpanded(false)}
-          onSelect={handleMenuSelect} // patched
+          onSelect={handleMenuSelect}
+          onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
         />
 
       </Toolbar>