Is there a way to remove the divider after the last category when using MUI components and adding a divider after each category?
This is my code with the divider right at the bottom before the closing tag.
export const MenuItemGroup = ({ label, items, menuVariant, onItemClick }: MenuItemGroupProps) => {
return (
<Box>
<>
{label !== undefined && label !== null ? (
<Box sx={{ margin: '16px', marginBottom: '8px' }}>
<Typography variant="body2medium" sx={{ color: 'var(--sds-ref-color-base-black70)' }}>
{label}
</Typography>
</Box>
) : (
<></>
)}
</>
<>
{items &&
items.map((item, itemIndex) => {
return <MenuItem key={itemIndex} item={item} menuVariant={menuVariant} onItemClick={onItemClick} />;
})}
</>
</Box>
);
};
const MenuGroupSection = ({ label, groups, menuVariant, onItemClick }: MenuGroupSectionProps) => {
return (
<Stack direction="column" sx={{ display: 'flex', width: '100%' }}>
{label !== undefined && label !== null ? (
<>
<Box sx={{ margin: '16px', marginBottom: '8px' }}>
<Typography variant="body2semibold" sx={{ color: '#000000' }}>
{label}
</Typography>
</Box>
</>
) : (
<></>
)}
<Stack direction="row" sx={{flexWrap: 'wrap', display:'grid' , gridTemplateColumns : 'auto auto' }}>
{groups &&
groups.map((group, index) => {
return (
<MenuItemGroup
key={index}
label={group.label}
items={group.items as MenuItemNode[]}
onItemClick={onItemClick}
menuVariant={menuVariant}
></MenuItemGroup>
);
})}
</Stack>
<Divider sx={{ marginLeft: '16px', marginRight: '16px' }} />
</Stack>
);
};