005cf56baf
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
60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Drawer from '@mui/material/Drawer';
|
|
import Button from '@mui/material/Button';
|
|
import List from '@mui/material/List';
|
|
import Divider from '@mui/material/Divider';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import InboxIcon from '@mui/icons-material/MoveToInbox';
|
|
import MailIcon from '@mui/icons-material/Mail';
|
|
|
|
export default function TemporaryDrawer() {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
const toggleDrawer = (newOpen) => () => {
|
|
setOpen(newOpen);
|
|
};
|
|
|
|
const DrawerList = (
|
|
<Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
|
|
<List>
|
|
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>
|
|
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
|
</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
{['All mail', 'Trash', 'Spam'].map((text, index) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>
|
|
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
|
</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<Button onClick={toggleDrawer(true)}>Open drawer</Button>
|
|
<Drawer open={open} onClose={toggleDrawer(false)}>
|
|
{DrawerList}
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
}
|