feat: adding the drawer menu

2025-05-19 20:57:28 -06:00
parent b5af6ea7af
commit 98f6f9814d
3 changed files with 66 additions and 3 deletions
--- a/src/components/MenuDrawer.jsx
+++ b/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>
+  );
+}