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
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import Box from '@mui/joy/Box';
|
|
import Drawer from '@mui/joy/Drawer';
|
|
import Button from '@mui/joy/Button';
|
|
import List from '@mui/joy/List';
|
|
import Divider from '@mui/joy/Divider';
|
|
import ListItem from '@mui/joy/ListItem';
|
|
import ListItemButton from '@mui/joy/ListItemButton';
|
|
|
|
export default function DrawerTransition() {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
|
|
Open drawer
|
|
</Button>
|
|
<Drawer
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
sx={[
|
|
open
|
|
? {
|
|
'--Drawer-transitionDuration': '0.4s',
|
|
'--Drawer-transitionFunction': 'cubic-bezier(0.79,0.14,0.15,0.86)',
|
|
}
|
|
: {
|
|
'--Drawer-transitionDuration': '0.2s',
|
|
'--Drawer-transitionFunction': 'cubic-bezier(0.77,0,0.18,1)',
|
|
},
|
|
]}
|
|
>
|
|
<Box role="presentation" sx={{ p: 2 }}>
|
|
<List>
|
|
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text) => (
|
|
<ListItem key={text}>
|
|
<ListItemButton>{text}</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
{['All mail', 'Trash', 'Spam'].map((text) => (
|
|
<ListItem key={text}>
|
|
<ListItemButton>{text}</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
</React.Fragment>
|
|
);
|
|
}
|