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
35 lines
944 B
JavaScript
35 lines
944 B
JavaScript
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import ListSubheader from '@mui/material/ListSubheader';
|
|
|
|
export default function PinnedSubheaderList() {
|
|
return (
|
|
<List
|
|
sx={{
|
|
width: '100%',
|
|
maxWidth: 360,
|
|
bgcolor: 'background.paper',
|
|
position: 'relative',
|
|
overflow: 'auto',
|
|
maxHeight: 300,
|
|
'& ul': { padding: 0 },
|
|
}}
|
|
subheader={<li />}
|
|
>
|
|
{[0, 1, 2, 3, 4].map((sectionId) => (
|
|
<li key={`section-${sectionId}`}>
|
|
<ul>
|
|
<ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
|
|
{[0, 1, 2].map((item) => (
|
|
<ListItem key={`item-${sectionId}-${item}`}>
|
|
<ListItemText primary={`Item ${item}`} />
|
|
</ListItem>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</List>
|
|
);
|
|
}
|