chore: adding collapsable submenu to Catalog

src/components/MenuDrawer.jsx

@@ -9,13 +9,17 @@ import {
   useMediaQuery,
   InputBase,
   Tooltip,
-  Divider
+  Divider,
+  ListItemButton,
+  Collapse
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useEffect, useMemo, useState } from 'react';
 import { useAuth } from '../context/AuthContext';
 
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 
 // ---- Menu options (unchanged) ----
 const menuOptions = {
@@ -50,6 +54,15 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
 
   // Collapsed state is only meaningful on desktop (permanent drawer)
   const [collapsed, setCollapsed] = useState(false);
+  const catalogChildren = [
+    'Furniture',
+    'Lighting',
+    'Textiles',
+    'Decorative Accessories',
+    'Kitchen & Dining',
+    'Outdoor Living',
+  ];
+  const [openCatalog, setOpenCatalog] = useState(false);
 
   // Interpret parent "open" prop:
   // - Mobile (temporary): open controls visibility
@@ -141,6 +154,95 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
         alignItems: 'stretch'
       }}>
         {items.map(({ text, icon }, index) => {
+          const isCatalog = text === 'Catalog';
+    
+          // Special case: Catalog with submenu
+          if (isCatalog) {
+            return (
+              <Box key={`catalog-${index}`}>
+                <Tooltip
+                  title={collapsed ? text : ''}
+                  placement="right"
+                  disableHoverListener={!collapsed}
+                >
+                  <ListItem
+                    onClick={() => {
+                      if (collapsed) {
+                        // Expand drawer first so submenu is visible
+                        setCollapsed(false);
+                        setOpenCatalog(true);
+                      } else {
+                        setOpenCatalog((v) => !v);
+                      }
+                    }}
+                    sx={{
+                      px: collapsed ? 0 : 2,
+                      minHeight: collapsed ? 48 : 44,
+                      cursor: 'pointer',
+                      justifyContent: collapsed ? 'center' : 'flex-start',
+                      width: '100%',
+                    }}
+                  >
+                    <ListItemIcon
+                      sx={{
+                        color: '#40120EFF',
+                        minWidth: collapsed ? 'auto' : 40,
+                        mr: collapsed ? 0 : 1.5,
+                        justifyContent: 'center',
+                      }}
+                    >
+                      {icon}
+                    </ListItemIcon>
+    
+                    {!collapsed && (
+                      <>
+                        <ListItemText
+                          primary={text}
+                          slotProps={{
+                            primary: {
+                              sx: {
+                                color: '#40120EFF',
+                                fontWeight: 'medium',
+                              },
+                            },
+                          }}
+                        />
+                        {openCatalog ? <ExpandLess /> : <ExpandMore />}
+                      </>
+                    )}
+                  </ListItem>
+                </Tooltip>
+    
+                {/* Submenu list */}
+                {!collapsed && (
+                  <Collapse in={openCatalog} timeout="auto" unmountOnExit>
+                    <List component="div" disablePadding sx={{ pl: 7 }}>
+                      {catalogChildren.map((child) => (
+                        <ListItemButton
+                          key={child}
+                          sx={{ py: 0.5, borderRadius: 1 }}
+                          onClick={() => {
+                            if (isMobile) onClose?.();
+                            onSelect?.(child);
+                          }}
+                        >
+                          <ListItemText
+                            primary={child}
+                            slotProps={{
+                              primary: {
+                                sx: { color: '#40120EFF', fontWeight: 400 },
+                              },
+                            }}
+                          />
+                        </ListItemButton>
+                      ))}
+                    </List>
+                  </Collapse>
+                )}
+              </Box>
+            );
+          }
+    
           // Default items
           return (
             <Tooltip
@@ -179,13 +281,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
                 {!collapsed && (
                   <ListItemText
                     primary={text}
-                    sx={{
-                      opacity: 1,
-                      transition: theme.transitions.create('opacity', {
-                        duration: theme.transitions.duration.shortest,
-                      }),
-                      whiteSpace: 'nowrap',
-                    }}
                     slotProps={{
                       primary: {
                         sx: {