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
+        <Box
-          variant="h6"
+          sx={{
-          noWrap
+            display: 'flex',
-          sx={{ color: '#40120EFF', fontWeight: 600 }}
+            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}
+          onSelect={handleMenuSelect}
-          onClose={() => setDrawerExpanded(false)}
+          onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
-          onSelect={handleMenuSelect} // patched
         />
 
       </Toolbar>

src/components/MenuDrawer.jsx

@@ -46,7 +46,7 @@ const menuOptions = {
 const OPEN_WIDTH = 300;
 const MINI_WIDTH = 72;
 
-export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
+export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, onExpandedChange }) {
   const theme = useTheme();
   const isMobile = useMediaQuery('(max-width:900px)');
   const items = useMemo(() => menuOptions[zone] ?? [], [zone]);
@@ -67,11 +67,12 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
   // Interpret parent "open" prop:
   // - Mobile (temporary): open controls visibility
   // - Desktop (permanent): open=true => expanded, open=false => collapsed
+  // Inform parent (AppHeader) about expanded/collapsed state
   useEffect(() => {
-    if (!isMobile) {
+    // On mobile the drawer is temporary; treat as expanded for header layout
-      setCollapsed(!open);
+    const expanded = isMobile ? true : !collapsed;
-    }
+    onExpandedChange?.(expanded);
-  }, [open, isMobile]);
+  }, [collapsed, isMobile, onExpandedChange]);
 
   const paperWidth = isMobile ? OPEN_WIDTH : (collapsed ? MINI_WIDTH : OPEN_WIDTH);