43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
|
import IconButton from '@mui/joy/IconButton';
|
||
|
|
import Menu from '@mui/joy/Menu';
|
||
|
|
import MenuItem from '@mui/joy/MenuItem';
|
||
|
|
import ListItemDecorator from '@mui/joy/ListItemDecorator';
|
||
|
|
import ListDivider from '@mui/joy/ListDivider';
|
||
|
|
import MoreVert from '@mui/icons-material/MoreVert';
|
||
|
|
import Edit from '@mui/icons-material/Edit';
|
||
|
|
import DeleteForever from '@mui/icons-material/DeleteForever';
|
||
|
|
import MenuButton from '@mui/joy/MenuButton';
|
||
|
|
import Dropdown from '@mui/joy/Dropdown';
|
||
|
|
|
||
|
|
export default function PositionedMenu() {
|
||
|
|
return (
|
||
|
|
<Dropdown>
|
||
|
|
<MenuButton
|
||
|
|
slots={{ root: IconButton }}
|
||
|
|
slotProps={{ root: { variant: 'outlined', color: 'neutral' } }}
|
||
|
|
>
|
||
|
|
<MoreVert />
|
||
|
|
</MenuButton>
|
||
|
|
<Menu placement="bottom-end">
|
||
|
|
<MenuItem>
|
||
|
|
<ListItemDecorator>
|
||
|
|
<Edit />
|
||
|
|
</ListItemDecorator>{' '}
|
||
|
|
Edit post
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem disabled>
|
||
|
|
<ListItemDecorator />
|
||
|
|
Draft post
|
||
|
|
</MenuItem>
|
||
|
|
<ListDivider />
|
||
|
|
<MenuItem variant="soft" color="danger">
|
||
|
|
<ListItemDecorator sx={{ color: 'inherit' }}>
|
||
|
|
<DeleteForever />
|
||
|
|
</ListItemDecorator>{' '}
|
||
|
|
Delete
|
||
|
|
</MenuItem>
|
||
|
|
</Menu>
|
||
|
|
</Dropdown>
|
||
|
|
);
|
||
|
|
}
|