import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Button from "@material-ui/core/Button";
const useStyles = makeStyles({ list: { width: 250 }, fullList: { width: "auto" }, paper: { background: "blue" }
});
const DrawerWrapper = () => { const classes = useStyles(); const [isOpen, setIsOpen] = useState(); const sideList = ( <div className={classes.list}> <List> {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( <ListItem button key={text}> <ListItemText primary={text} /> </ListItem> ))} </List> </div> ); return ( <> <Button onClick={() => setIsOpen(true)}>Open Left</Button> <Drawer classes={{ paper: classes.paper }} open={isOpen} onClose={() => setIsOpen(false)} > <div tabIndex={0} role="button" onClick={() => setIsOpen(true)} classes={{ root: classes.root }} > {sideList} </div> </Drawer> </> );
};
export default function App() { return ( <div> <DrawerWrapper /> </div> );
}