SHARE
TWEET

Untitled

a guest Aug 19th, 2019 183 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import AppBar from '@material-ui/core/AppBar';
  4. import CssBaseline from '@material-ui/core/CssBaseline';
  5. import Divider from '@material-ui/core/Divider';
  6. import Drawer from '@material-ui/core/Drawer';
  7. import Hidden from '@material-ui/core/Hidden';
  8. import IconButton from '@material-ui/core/IconButton';
  9. import InboxIcon from '@material-ui/icons/MoveToInbox';
  10. import List from '@material-ui/core/List';
  11. import ListItem from '@material-ui/core/ListItem';
  12. import ListItemIcon from '@material-ui/core/ListItemIcon';
  13. import ListItemText from '@material-ui/core/ListItemText';
  14. import MailIcon from '@material-ui/icons/Mail';
  15. import MenuIcon from '@material-ui/icons/Menu';
  16. import Toolbar from '@material-ui/core/Toolbar';
  17. import Typography from '@material-ui/core/Typography';
  18. import { makeStyles, useTheme } from '@material-ui/core/styles';
  19.  
  20. const drawerWidth = 240;
  21.  
  22. const useStyles = makeStyles(theme => ({
  23.   root: {
  24.     display: 'flex',
  25.   },
  26.   drawer: {
  27.     [theme.breakpoints.up('sm')]: {
  28.       width: drawerWidth,
  29.       flexShrink: 0,
  30.     },
  31.   },
  32.   appBar: {
  33.     marginLeft: drawerWidth,
  34.     [theme.breakpoints.up('sm')]: {
  35.       width: `calc(100% - ${drawerWidth}px)`,
  36.     },
  37.   },
  38.   menuButton: {
  39.     marginRight: theme.spacing(2),
  40.     [theme.breakpoints.up('sm')]: {
  41.       display: 'none',
  42.     },
  43.   },
  44.   toolbar: theme.mixins.toolbar,
  45.   drawerPaper: {
  46.     width: drawerWidth,
  47.   },
  48.   content: {
  49.     flexGrow: 1,
  50.     padding: theme.spacing(3),
  51.   },
  52. }));
  53.  
  54. function ResponsiveDrawer(props) {
  55.   const { container } = props;
  56.   const classes = useStyles();
  57.   const theme = useTheme();
  58.   const [mobileOpen, setMobileOpen] = React.useState(false);
  59.  
  60.   function handleDrawerToggle() {
  61.     setMobileOpen(!mobileOpen);
  62.   }
  63.  
  64.   const drawer = (
  65.     <div>
  66.       <div className={classes.toolbar} />
  67.       <Divider />
  68.       <List>
  69.         {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
  70.           <ListItem button key={text}>
  71.             <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
  72.             <ListItemText primary={text} />
  73.           </ListItem>
  74.         ))}
  75.       </List>
  76.       <Divider />
  77.       <List>
  78.         {['All mail', 'Trash', 'Spam'].map((text, index) => (
  79.           <ListItem button key={text}>
  80.             <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
  81.             <ListItemText primary={text} />
  82.           </ListItem>
  83.         ))}
  84.       </List>
  85.     </div>
  86.   );
  87.  
  88.   return (
  89.     <div className={classes.root}>
  90.       <CssBaseline />
  91.       <AppBar position="fixed" className={classes.appBar}>
  92.         <Toolbar>
  93.           <IconButton
  94.             color="inherit"
  95.             aria-label="open drawer"
  96.             edge="start"
  97.             onClick={handleDrawerToggle}
  98.             className={classes.menuButton}
  99.           >
  100.             <MenuIcon />
  101.           </IconButton>
  102.           <Typography variant="h6" noWrap>
  103.             Responsive drawer
  104.           </Typography>
  105.         </Toolbar>
  106.       </AppBar>
  107.       <nav className={classes.drawer} aria-label="mailbox folders">
  108.         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
  109.         <Hidden smUp implementation="css">
  110.           <Drawer
  111.             container={container}
  112.             variant="temporary"
  113.             anchor={theme.direction === 'rtl' ? 'right' : 'left'}
  114.             open={mobileOpen}
  115.             onClose={handleDrawerToggle}
  116.             classes={{
  117.               paper: classes.drawerPaper,
  118.             }}
  119.             ModalProps={{
  120.               keepMounted: true, // Better open performance on mobile.
  121.             }}
  122.           >
  123.             {drawer}
  124.           </Drawer>
  125.         </Hidden>
  126.         <Hidden xsDown implementation="css">
  127.           <Drawer
  128.             classes={{
  129.               paper: classes.drawerPaper,
  130.             }}
  131.             variant="permanent"
  132.             open
  133.           >
  134.             {drawer}
  135.           </Drawer>
  136.         </Hidden>
  137.       </nav>
  138.       <main className={classes.content}>
  139.         <div className={classes.toolbar} />
  140.         <Typography paragraph>
  141.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  142.           ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
  143.           facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
  144.           gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
  145.           donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
  146.           adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
  147.           Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
  148.           imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
  149.           arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
  150.           donec massa sapien faucibus et molestie ac.
  151.         </Typography>
  152.         <Typography paragraph>
  153.           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
  154.           facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
  155.           tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
  156.           consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
  157.           vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
  158.           hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
  159.           tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
  160.           nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
  161.           accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
  162.         </Typography>
  163.       </main>
  164.     </div>
  165.   );
  166. }
  167.  
  168. ResponsiveDrawer.propTypes = {
  169.   /**
  170.    * Injected by the documentation to work in an iframe.
  171.    * You won't need it on your project.
  172.    */
  173.   container: PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element),
  174. };
  175.  
  176. export default ResponsiveDrawer;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top