Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import List from '@mui/joy/List';
|
|
import ListItem from '@mui/joy/ListItem';
|
|
import MenuList from '@mui/joy/MenuList';
|
|
import MenuItem from '@mui/joy/MenuItem';
|
|
import Typography from '@mui/joy/Typography';
|
|
|
|
export default function MenuListGroup() {
|
|
return (
|
|
<MenuList
|
|
component="div"
|
|
variant="outlined"
|
|
size="sm"
|
|
sx={{
|
|
boxShadow: 'sm',
|
|
flexGrow: 0,
|
|
minWidth: 200,
|
|
maxHeight: 240,
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
{[...Array(5)].map((_, categoryIndex) => (
|
|
<List key={categoryIndex}>
|
|
<ListItem sticky>
|
|
<Typography
|
|
id={`sticky-list-demo-${categoryIndex}`}
|
|
level="body-xs"
|
|
sx={{ textTransform: 'uppercase', fontWeight: 'lg' }}
|
|
>
|
|
Category {categoryIndex + 1}
|
|
</Typography>
|
|
</ListItem>
|
|
{[...Array(10)].map((__, index) => (
|
|
<MenuItem key={index}>Action {index + 1}</MenuItem>
|
|
))}
|
|
</List>
|
|
))}
|
|
</MenuList>
|
|
);
|
|
}
|