[Drawer] Support all types of navigation drawers in the Material Design Guidelines

docs/src/components/AppDrawer.js

@@ -81,11 +81,11 @@ function AppDrawer(props) {
 
   return (
     <Drawer
+      type={props.type}
       className={props.className}
       paperClassName={classes.paper}
       open={props.open}
       onRequestClose={props.onRequestClose}
-      docked={props.docked}
     >
       <div className={classes.nav}>
         <Toolbar className={classes.toolbar}>
@@ -113,10 +113,10 @@ function AppDrawer(props) {
 AppDrawer.propTypes = {
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
-  docked: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
   routes: PropTypes.array.isRequired,
+  type: PropTypes.string,
 };
 
 AppDrawer.contextTypes = {

docs/src/components/AppFrame.js

@@ -115,12 +115,12 @@ class AppFrame extends Component {
     const classes = this.props.classes;
     const title = getTitle(routes);
 
-    let drawerDocked = isWidthUp('lg', width);
+    let drawerType = isWidthUp('lg', width) ? 'permanent' : 'temporary';
     let navIconClassName = classes.icon;
     let appBarClassName = classes.appBar;
 
     if (title === null) { // home route, don't shift app bar or dock drawer
-      drawerDocked = false;
+      drawerType = 'temporary';
       appBarClassName += ` ${classes.appBarHome}`;
     } else {
       navIconClassName += ` ${classes.navIconHide}`;
@@ -166,11 +166,11 @@ class AppFrame extends Component {
           </Toolbar>
         </AppBar>
         <AppDrawer
+          type={drawerType}
           className={classes.drawer}
-          docked={drawerDocked}
           routes={routes}
           onRequestClose={this.handleDrawerClose}
-          open={drawerDocked || this.state.drawerOpen}
+          open={drawerType === 'permanent' || this.state.drawerOpen}
         />
         {children}
       </div>

docs/src/pages/component-api/Drawer/Drawer.md

@@ -8,7 +8,7 @@ Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| anchor | enum:&nbsp;'left'<br>&nbsp;'top'<br>&nbsp;'right'<br>&nbsp;'bottom'<br> | 'left' | Side which will the drawer will appear from. |
+| anchor | enum:&nbsp;'left'<br>&nbsp;'top'<br>&nbsp;'right'<br>&nbsp;'bottom'<br> | 'left' | Side from which the drawer will appear. |
 | children | node |  | The contents of the drawer. |
 | className | string |  | The CSS class name of the root element. |
 | docked | bool | false | If `true`, the drawer will dock itself and will no longer slide in with an overlay. |
@@ -18,5 +18,7 @@ Props
 | onRequestClose | function |  | Callback fired when the internal modal requests to be closed. |
 | open | bool | false | If `true`, the drawer is open. |
 | paperClassName | string |  | The CSS class name of the paper element. |
+| slideFromOutsideSelf | bool | false | If `false`, let the drawer slide in from outside the viewport. Set to `true` to let the drawer slide in from outside its own bounding box and position. Only works on `temporary` and `persistent` drawers. |
+| type | enum:<br>&nbsp;'permanent'<br>&nbsp;'persistent'<br>&nbsp;'mini'<br>&nbsp;'temporary'<br> | 'temporary' | The type of drawer. See the [Material Design Guidelines](https://material.io/guidelines/patterns/navigation-drawer.html) for more info. NOTE: For the `mini` variant, you must wrap the drawer's children in a container with the same fixed width set via paperClassName. |
 
 Any other properties supplied will be spread to the root element.

docs/src/pages/component-demos/drawers/MiniDrawer.js

@@ -0,0 +1,241 @@
+// @flow weak
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import classNames from 'classnames';
+import Drawer from 'material-ui/Drawer';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import List, { ListItem, ListItemIcon } from 'material-ui/List';
+import Typography from 'material-ui/Typography';
+import Divider from 'material-ui/Divider';
+import IconButton from 'material-ui/IconButton';
+import MenuIcon from 'material-ui-icons/Menu';
+import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
+import InboxIcon from 'material-ui-icons/MoveToInbox';
+import DraftsIcon from 'material-ui-icons/Drafts';
+import StarIcon from 'material-ui-icons/Star';
+import SendIcon from 'material-ui-icons/Send';
+import MailIcon from 'material-ui-icons/Mail';
+import DeleteIcon from 'material-ui-icons/Delete';
+import ReportIcon from 'material-ui-icons/Report';
+
+const drawerWidth = 240;
+
+const styleSheet = createStyleSheet('MiniDrawer', (theme) => ({
+  demoContainer: {
+    width: '100%',
+    height: 434,
+    marginTop: 32,
+    zIndex: 1,
+    overflow: 'hidden',
+  },
+  appFrame: {
+    position: 'relative',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+  appBar: {
+    position: 'absolute',
+    zIndex: theme.zIndex.navDrawer + 1,
+    transition: theme.transitions.create(['width', 'margin'],
+      { easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+  },
+  appBarShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(['width', 'margin'],
+      { easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+  },
+  menuButton: {
+    marginLeft: 12,
+    marginRight: 36,
+  },
+  hide: {
+    display: 'none',
+  },
+  drawerPaper: {
+    position: 'relative',
+    height: 'auto',
+    width: drawerWidth,
+  },
+  drawerInner: {
+    // Make the items inside not wrap when transitioning:
+    width: drawerWidth,
+  },
+  drawerHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    height: 56,
+    padding: '0 8px',
+  },
+  navItem: {
+    paddingLeft: 24,
+    paddingRight: 24,
+  },
+  navItemText: {
+    padding: '0 16px',
+  },
+  content: {
+    height: 'calc(100% - 56px)',
+    width: '100%',
+    marginTop: 56,
+    flexGrow: 1,
+    backgroundColor: '#fafafa',
+    padding: 24,
+  },
+  [theme.breakpoints.up('sm')]: {
+    content: {
+      height: 'calc(100% - 64px)',
+      marginTop: 64,
+    },
+    drawerHeader: {
+      height: 64,
+    },
+  },
+}));
+
+class MiniDrawer extends Component {
+  state = {
+    open: false,
+  };
+
+  toggleDrawer = (open) => {
+    this.setState({ open });
+  };
+
+  handleDrawerOpen = () => this.toggleDrawer(true);
+  handleDrawerClose = () => this.toggleDrawer(false);
+
+  render() {
+    const classes = this.props.classes;
+
+    const mailFolderListItems = (
+      <div>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <InboxIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            Inbox
+          </Typography>
+        </ListItem>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <StarIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            Starred
+          </Typography>
+        </ListItem>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <SendIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            Send mail
+          </Typography>
+        </ListItem>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            Drafts
+          </Typography>
+        </ListItem>
+      </div>
+    );
+
+    const otherMailFolderListItems = (
+      <div>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <MailIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            All mail
+          </Typography>
+        </ListItem>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <DeleteIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            Trash
+          </Typography>
+        </ListItem>
+        <ListItem button className={classes.navItem}>
+          <ListItemIcon>
+            <ReportIcon />
+          </ListItemIcon>
+          <Typography type="body2" className={classes.navItemText}>
+            Spam
+          </Typography>
+        </ListItem>
+      </div>
+    );
+
+    return (
+      <div className={classes.demoContainer}>
+        <div className={classes.appFrame}>
+          <AppBar className={classNames(classes.appBar, this.state.open && classes.appBarShift)}>
+            <Toolbar disableGutters={!this.state.open}>
+              <IconButton
+                onClick={this.handleDrawerOpen}
+                className={classNames(classes.menuButton, this.state.open && classes.hide)}
+                contrast
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography type="title" colorInherit noWrap>
+                Mini variant navigation drawer
+              </Typography>
+            </Toolbar>
+          </AppBar>
+          <Drawer
+            type="mini"
+            paperClassName={classes.drawerPaper}
+            open={this.state.open}
+          >
+            <div className={classes.drawerInner}>
+              <div className={classes.drawerHeader}>
+                <IconButton onClick={this.handleDrawerClose}>
+                  <ChevronLeftIcon />
+                </IconButton>
+              </div>
+              <Divider />
+              <List className={classes.list}>
+                {mailFolderListItems}
+              </List>
+              <Divider />
+              <List className={classes.list}>
+                {otherMailFolderListItems}
+              </List>
+            </div>
+          </Drawer>
+          <main className={classes.content}>
+            {/* eslint-disable max-len */}
+            <Typography type="body1">
+              {"You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man."}
+            </Typography>
+            {/* eslint-enable */}
+          </main>
+        </div>
+      </div>
+    );
+  }
+}
+
+MiniDrawer.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(MiniDrawer);