feat: adding the drawer menu

src/App.jsx

@@ -23,6 +23,8 @@ function App() {
       >
 
         <AppHeader zone={zone} />
+
+        {/* Main content area */}
         <Box component="main" sx={{ flex: 1, p: 2 }}>
           <h1>Welcome to the Fendi Casa Experience</h1>
           <p>This is a sample box.</p>

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>
   );

src/components/MenuDrawer.jsx

@@ -0,0 +1,41 @@
+import { Drawer, List, ListItem, ListItemText, useMediaQuery } from '@mui/material';
+
+const menuOptions = {
+  public: ['Home', 'Explore', 'Contact'],
+  restricted: ['Dashboard', 'Projects', 'Support'],
+  private: ['Admin', 'Users', 'Settings'],
+};
+
+export default function MenuDrawer({ zone = 'public', open, onClose }) {
+  const isMobile = useMediaQuery('(max-width:900px)');
+  const items = menuOptions[zone];
+
+  return (
+    <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
+        paper: {
+          sx: {
+            backgroundColor: '#000000a0', // negro semitransparente
+            width: isMobile ? '100vw' : 250,
+          },
+        },
+      }}>
+     <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
+        {items.map((text, index) => (
+          <ListItem key={index} onClick={onClose}>
+             <ListItemText
+              primary={text}
+              slotProps={{
+                primary: {
+                  sx: {
+                    color: '#ccc',
+                    fontWeight: 'medium',
+                  },
+                },
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  );
+}