import
"./App.css"
;
import * as React from
"react"
;
import Box from
"@mui/material/Box"
;
import SwipeableDrawer from
"@mui/material/SwipeableDrawer"
;
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 MailIcon from
"@mui/icons-material/Mail"
;
import WebIcon from
"@mui/icons-material/Web"
;
function
App() {
const [state, setState] = React.useState({
top:
false
,
left:
false
,
bottom:
false
,
right:
false
,
});
const toggleDrawer = (anchor, open) => (event) => {
if
(
event &&
event.type ===
"keydown"
&&
(event.key ===
"Tab"
|| event.key ===
"Shift"
)
) {
return
;
}
setState({ ...state, [anchor]: open });
};
const list = (anchor) => (
<Box
sx={{ width: anchor ===
"top"
||
anchor ===
"bottom"
?
"auto"
: 250 }}
role=
"presentation"
onClick={toggleDrawer(anchor,
false
)}
onKeyDown={toggleDrawer(anchor,
false
)}
>
<List>
{[
"Data Structures"
,
"Algorithms"
,
"
Web Development"
].map(
(text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ?
<WebIcon /> :
<MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
)
)}
</List>
</Box>
);
return
(
<div className=
"App"
>
<div
className=
"head"
style={{
width:
"fit-content"
,
margin:
"auto"
,
}}
>
<h1
style={{
color:
"green"
,
}}
>
GeeksforGeeks
</h1>
<strong>React MUI SwipeableDrawer API</strong>
</div>
<br />
<div
style={{
width:
"fit-content"
,
margin:
"auto"
,
}}
>
{[
"left"
,
"right"
,
"top"
,
"bottom"
].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor,
true
)}>
{anchor}
</Button>
<SwipeableDrawer
transitionDuration={1000}
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor,
false
)}
onOpen={toggleDrawer(anchor,
true
)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
</div>
);
}
export
default
App;