Drawer

The Drawer slides in from the side. It is a common pattern found in Google apps and follows the keylines and metrics for lists.

Persistent Drawer

To show this type of Drawer you will need this code in down here.

     
<div className={classes.root}>
    <div className={classes.appFrame}>
        <AppBar className={classNames('bg-primary',classes.appBar, this.state.open && classes.appBarShift)}>
            <Toolbar disableGutters={!this.state.open}>
                <IconButton
                        aria-label="open drawer"
                        onClick={this.handleDrawerOpen}
                        className={classNames(classes.menuButton,this.state.open && classes.hide)} >
                    <MenuIcon className="text-white" />
                </IconButton>
                <Typography type="title" color="inherit" className="text-white" noWrap>
                    Persistent drawer
                </Typography>
            </Toolbar>
        </AppBar>
        <Drawer
                variant="persistent"
                classes={{
                paper: classes.drawerPaper,
                }}
                open={this.state.open} >
            <div className={classes.drawerInner}>
                <div className={classes.drawerHeader}>
                    <IconButton onClick={this.handleDrawerClose}>
                        {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                    </IconButton>
                </div>
                <Divider />
                <List className={classes.list}>{mailFolderListItems}</List>
                <Divider />
                <List className={classes.list}>{otherMailFolderListItems}</List>
            </div>
        </Drawer>
        <main className={classNames(classes.content, this.state.open && classes.contentShift)}>
            <Typography type="body1" noWrap>
                {'You think water moves fast? You should see ice.'}
            </Typography>
        </main>
    </div>
</div>
  

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
anchor	enum: 'left' |  'top' |  'right' |  'bottom'	'left'	Side from which the drawer will appear.
children	node		The contents of the drawer.
classes	object		Useful to extend the style applied to components.
elevation	number	16	The elevation of the drawer.
ModalProps	object		Properties applied to the Modal element.
onClose	func		Callback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback
open	bool	false	If true, the drawer is open.
PaperProps	object		Properties applied to the Paper element.
SlideProps	object		Properties applied to the Slide element.
transitionDuration	union: number |  {enter?: number, exit?: number}	{ enter: duration.enteringScreen, exit: duration.leavingScreen }	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
variant	enum: 'permanent' |  'persistent' |  'temporary'	'temporary'	The variant of drawer.