I need a Menu from MUI that expand the content based on the collapse transition, note, i was abble to do that using ALL OTHERS transintions: fade, grow, slide, but the damn collapse seems impossible,for example: with a custom fade
import Fade from '@mui/material/Fade';
import { forwardRef } from 'react';
const CustomFade = forwardRef((props, ref) => {
return (
<Fade {...props} ref={ref}>
{props.children}
</Fade>
);
});
export default CustomFade;
and at menu:
```<Menu
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
transitionDuration={0}
sx={{ display: { xs: 'block' } }}
slotProps={{
paper: {
sx: {
backgroundColor: '#123456',
minHeight:'0px',
padding:'0px',
minWidth:'0px',
margin:'0px'
},
},
}}
>
<Collapse in={checked} timeout={5000} >
<MenuItem key={'sdfad'} sx={{minHeight:'0px',minWidth:'0px',padding:'0px',margin:'0px'}} onClick={()=>{
handleCloseNavMenu
}} >
<div style={{display:'flex',flexDirection:"column",minHeight:'0px',minWidth:'0px',padding:'0px',margin:'0px'}} >
{pages.map((page) => (
<Typography key={page} variant='navbar' component='a' href='#' sx={{ minHeight:'0px',minWidth:'0px',padding:'0px',margin:'0px',textDecoration: 'none', cursor: location.pathname === '/' ? "default" : 'pointer', color: location.pathname === '/' && 'rgba(0,0,0,0.5)' }}>
<span>Quinteto </span>
</Typography>
))}
</div>
</MenuItem>
</Collapse>
</Menu>```
to make the custom fade works properly i need just use TransintionComponent={CustomFade} but with the collapse it just doesnt work, looks like a transition was never declared, and the menu uses the default "Grow".
I need a Menu from MUI that expand the content based on the collapse transition, note, i was abble to do that using ALL OTHERS transintions: fade, grow, slide, but the damn collapse seems impossible,for example: with a custom fade
import Fade from '@mui/material/Fade';
import { forwardRef } from 'react';
const CustomFade = forwardRef((props, ref) => {
return (
<Fade {...props} ref={ref}>
{props.children}
</Fade>
);
});
export default CustomFade;
and at menu:
```<Menu
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
transitionDuration={0}
sx={{ display: { xs: 'block' } }}
slotProps={{
paper: {
sx: {
backgroundColor: '#123456',
minHeight:'0px',
padding:'0px',
minWidth:'0px',
margin:'0px'
},
},
}}
>
<Collapse in={checked} timeout={5000} >
<MenuItem key={'sdfad'} sx={{minHeight:'0px',minWidth:'0px',padding:'0px',margin:'0px'}} onClick={()=>{
handleCloseNavMenu
}} >
<div style={{display:'flex',flexDirection:"column",minHeight:'0px',minWidth:'0px',padding:'0px',margin:'0px'}} >
{pages.map((page) => (
<Typography key={page} variant='navbar' component='a' href='#' sx={{ minHeight:'0px',minWidth:'0px',padding:'0px',margin:'0px',textDecoration: 'none', cursor: location.pathname === '/' ? "default" : 'pointer', color: location.pathname === '/' && 'rgba(0,0,0,0.5)' }}>
<span>Quinteto </span>
</Typography>
))}
</div>
</MenuItem>
</Collapse>
</Menu>```
to make the custom fade works properly i need just use TransintionComponent={CustomFade} but with the collapse it just doesnt work, looks like a transition was never declared, and the menu uses the default "Grow".
Share asked Mar 9 at 0:25 Igor Galvao BezerraIgor Galvao Bezerra 433 bronze badges1 Answer
Reset to default 0look, the menu just the way i've just posted is working, but with a "bad solution" using setTimeout, seems to me just a poor approach