techniq / mui-app-container

Orchestrates Material-UI's AppBar and Drawer components based on device width

Home Page:https://techniq.github.io/mui-app-container/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Orchestrates Material-UI 1.0's AppBar, Drawer and content (ex. <main>) to provide a responsive application layout.

  • Sets <Drawer> props based on screen size
    • 960px (md) and up: sets variant to persistent and defaults open to true
    • Less than 960px (ex. phone): sets variant to temporary and defaults open to false
  • Shifts and resizes <AppBar> and content based when <Drawer> is persistent and open
  • 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)
  • Access state via context using <AppContainer.Consumer>

Usage

import AppContainer from 'mui-app-container';

export default () => (
  <AppContainer>
    {({ getAppBarProps, getDrawerProps, toggleDrawer }) => (
      <div>
        <AppBar {...getAppBarProps()}>
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={() => toggleDrawer()}
            >
              <MenuIcon />
            </IconButton>

            <Typography variant="title" color="inherit" style={{ flex: 1 }} noWrap>
              App Container Example
            </Typography>

            <IconButton color="inherit">
              <AccountCircle />
            </IconButton>
          </Toolbar>
        </AppBar>

        <Drawer {...getDrawerProps()}>
          <div>
            <Divider />
            <List>
              {mailFolderListItems(() => toggleDrawer(true))}
            </List>
            <Divider />
            <List>
              {otherMailFolderListItems(() => toggleDrawer(true))}
            </List>
          </div>
        </Drawer>

        <main>
          <Typography>{'Content goes here'}</Typography>
        </main>
      </div>
    )}
  </AppContainer>
);

About

Orchestrates Material-UI's AppBar and Drawer components based on device width

https://techniq.github.io/mui-app-container/


Languages

Language:JavaScript 99.3%Language:HTML 0.7%