feat: adding the drawer menu

src/components/AppHeader.jsx

@@ -1,17 +1,34 @@
+import { useState } from 'react';
 import fendiLogo from '/favicon.png'
 import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
+import MenuDrawer from './MenuDrawer'; 
 
 export default function AppHeader({ zone = 'public' }) {
+
+  const bgColor = {
+      public: '#000000a0',
+      restricted: '#e0e0ff',
+      private: '#d0f0e0',
+  };
+
+  const [menuOpen, setMenuOpen] = useState(false);
+
   const isPrivate = zone === 'private';
   const isRestricted = zone === 'restricted';
   const isPublic = zone === 'public';
 
   return (
-    <AppBar position="static" backgroundColor={isPrivate ? "primary" : isRestricted ? "secondary" : "transparent"} sx={{ backgroundColor: '#000000a0' }}>
+    <AppBar position="static"
+       sx={{
+          textAlign: 'center',
+          bgcolor: bgColor[zone],
+          mt: 'auto',
+          fontSize: { xs: '0.75rem', md: '1rem' },
+        }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <Box display="flex" alignItems="center">
-          <IconButton edge="start" color="inherit">
+          <IconButton edge="start" color="inherit" onClick={() => setMenuOpen(true)}>
             <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
           </IconButton>
           <Typography variant="h6" noWrap sx={{ ml: 1 }}>
@@ -30,7 +47,7 @@ export default function AppHeader({ zone = 'public' }) {
                 pr: 2,
                 py: 0.5,
                 borderRadius: 1,
-                backgroundColor: '#000000a0',
+                bgcolor: '#000000a0',
                 color: 'gray',
                 width: { md: '300px', lg: '400px' }
               }}
@@ -49,6 +66,9 @@ export default function AppHeader({ zone = 'public' }) {
           </Box>
         )}
 
+        {/* Rendering the Drawer */}
+       <MenuDrawer zone={zone} open={menuOpen} onClose={() => setMenuOpen(false)} />
+
       </Toolbar>
     </AppBar>
   );