Orchestrates Material-UI 1.0's AppBar, Drawer and content (ex. <main>
) to provide a responsive application layout.
- Sets
<Drawer>
props based on screen size960px
(md) and up: setsvariant
topersistent
and defaultsopen
totrue
- Less than
960px
(ex. phone): setsvariant
totemporary
and defaultsopen
tofalse
- Shifts and resizes
<AppBar>
and content based when<Drawer>
ispersistent
andopen
- Provides
toggleDrawer
to close drawer- Supports toggling drawer only when variant is temporary (
onClick
on list item on drawer) or on all calls (AppBar menu icon)
- Supports toggling drawer only when variant is temporary (
- Access state via context using
<AppContainer.Consumer>
Usage
; <AppContainer> <div> <AppBar ...> <Toolbar> <IconButton color="inherit" aria-label="open drawer" onClick= > <MenuIcon /> </IconButton> <Typography variant="title" color="inherit" style= flex: 1 noWrap> App Container Example </Typography> <IconButton color="inherit"> <AccountCircle /> </IconButton> </Toolbar> </AppBar> <Drawer ...> <div> <Divider /> <List> </List> <Divider /> <List> </List> </div> </Drawer> <main> <Typography>'Content goes here'</Typography> </main> </div> </AppContainer>;