AgileWebs/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: adding collapsable submenu to Catalog

Browse Source
This commit is contained in:
Rodolfo Ruiz 2025-08-14 17:22:45 -06:00
parent 6300421693
commit e4c8ed534d
1 changed files with 103 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/MenuDrawer.jsx
View File

@ -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: {