[docs] Add a Responsive Drawer example (#8494)

docs/src/modules/components/AppFrame.js

@@ -141,10 +141,6 @@ class AppFrame extends React.Component<any, any> {
     mobileOpen: false,
   };
 
-  handleDrawerClose = () => {
-    this.setState({ mobileOpen: false });
-  };
-
   handleDrawerToggle = () => {
     this.setState({ mobileOpen: !this.state.mobileOpen });
   };
@@ -167,7 +163,7 @@ class AppFrame extends React.Component<any, any> {
       disablePermanent = true;
       appBarClassName += ` ${classes.appBarHome}`;
     } else {
-      navIconClassName += ` ${classes.navIconHide}`;
+      navIconClassName = classes.navIconHide;
       appBarClassName += ` ${classes.appBarShift}`;
     }
 
@@ -212,7 +208,7 @@ class AppFrame extends React.Component<any, any> {
         <AppDrawer
           className={classes.drawer}
           disablePermanent={disablePermanent}
-          onRequestClose={this.handleDrawerClose}
+          onRequestClose={this.handleDrawerToggle}
           mobileOpen={this.state.mobileOpen}
         />
         {children}

docs/src/pages/demos/drawers/PermanentDrawer.js

@@ -31,7 +31,6 @@ const styles = theme => ({
     position: 'absolute',
     width: `calc(100% - ${drawerWidth}px)`,
     marginLeft: drawerWidth,
-    order: 1,
   },
   drawerPaper: {
     position: 'relative',

docs/src/pages/demos/drawers/ResponsiveDrawer.js

@@ -0,0 +1,148 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Drawer from 'material-ui/Drawer';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import List from 'material-ui/List';
+import Typography from 'material-ui/Typography';
+import IconButton from 'material-ui/IconButton';
+import Hidden from 'material-ui/Hidden';
+import Divider from 'material-ui/Divider';
+import MenuIcon from 'material-ui-icons/Menu';
+import { mailFolderListItems, otherMailFolderListItems } from './tileData';
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    height: 430,
+    marginTop: theme.spacing.unit * 3,
+    zIndex: 1,
+    overflow: 'hidden',
+  },
+  appFrame: {
+    position: 'relative',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+  appBar: {
+    position: 'absolute',
+    marginLeft: drawerWidth,
+    [theme.breakpoints.up('md')]: {
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  navIconHide: {
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+  drawerHeader: theme.mixins.toolbar,
+  drawerPaper: {
+    width: 250,
+    [theme.breakpoints.up('md')]: {
+      width: drawerWidth,
+      position: 'relative',
+      height: '100%',
+    },
+  },
+  content: {
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    padding: theme.spacing.unit * 3,
+    height: 'calc(100% - 56px)',
+    marginTop: 56,
+    [theme.breakpoints.up('sm')]: {
+      height: 'calc(100% - 64px)',
+      marginTop: 64,
+    },
+  },
+});
+
+class ResponsiveDrawer extends React.Component {
+  state = {
+    mobileOpen: false,
+  };
+
+  handleDrawerToggle = () => {
+    this.setState({ mobileOpen: !this.state.mobileOpen });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    const drawer = (
+      <div>
+        <div className={classes.drawerHeader} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+
+    return (
+      <div className={classes.root}>
+        <div className={classes.appFrame}>
+          <AppBar className={classes.appBar}>
+            <Toolbar>
+              <IconButton
+                color="contrast"
+                aria-label="open drawer"
+                onClick={this.handleDrawerToggle}
+                className={classes.navIconHide}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography type="title" color="inherit" noWrap>
+                Responsive drawer
+              </Typography>
+            </Toolbar>
+          </AppBar>
+          <Hidden mdUp>
+            <Drawer
+              type="temporary"
+              open={this.state.mobileOpen}
+              classes={{
+                paper: classes.drawerPaper,
+              }}
+              onRequestClose={this.handleDrawerToggle}
+              ModalProps={{
+                keepMounted: true, // Better open performance on mobile.
+              }}
+            >
+              {drawer}
+            </Drawer>
+          </Hidden>
+          <Hidden mdDown implementation="css">
+            <Drawer
+              type="permanent"
+              open
+              classes={{
+                paper: classes.drawerPaper,
+              }}
+            >
+              {drawer}
+            </Drawer>
+          </Hidden>
+          <main className={classes.content}>
+            <Typography type="body1" noWrap>
+              {'You think water moves fast? You should see ice.'}
+            </Typography>
+          </main>
+        </div>
+      </div>
+    );
+  }
+}
+
+ResponsiveDrawer.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ResponsiveDrawer);

docs/src/pages/demos/drawers/TemporaryDrawer.js

@@ -12,11 +12,9 @@ import { mailFolderListItems, otherMailFolderListItems } from './tileData';
 const styles = {
   list: {
     width: 250,
-    flex: 'initial',
   },
   listFull: {
     width: 'auto',
-    flex: 'initial',
   },
 };
 
@@ -38,18 +36,18 @@ class TemporaryDrawer extends React.Component {
     const classes = this.props.classes;
 
     const sideList = (
-      <div>
-        <List className={classes.list}>{mailFolderListItems}</List>
+      <div className={classes.list}>
+        <List>{mailFolderListItems}</List>
         <Divider />
-        <List className={classes.list}>{otherMailFolderListItems}</List>
+        <List>{otherMailFolderListItems}</List>
       </div>
     );
 
     const fullList = (
-      <div>
-        <List className={classes.listFull}>{mailFolderListItems}</List>
+      <div className={classes.listFull}>
+        <List>{mailFolderListItems}</List>
         <Divider />
-        <List className={classes.listFull}>{otherMailFolderListItems}</List>
+        <List>{otherMailFolderListItems}</List>
       </div>
     );
 

docs/src/pages/demos/drawers/drawers.md

@@ -4,7 +4,8 @@ components: Drawer
 
 # Drawer
 
-The [Drawer](https://material.io/guidelines/patterns/navigation-drawer.html) slides in from the side. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
+The [Drawer](https://material.io/guidelines/patterns/navigation-drawer.html) slides in from the side.
+It is a common pattern found in Google apps and follows the keylines and metrics for lists.
 
 ## Temporary drawer
 
@@ -25,18 +26,29 @@ Permanent navigation drawers are the recommended default for desktop.
 
 ## Persistent drawer
 
-Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session.
+Persistent navigation drawers can toggle open or closed.
+The drawer sits on the same surface elevation as the content.
+It is closed by default and opens by selecting the menu icon, and stays open until closed by the user.
+The state of the drawer is remembered from action to action and session to session.
 
 When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport.
 
-Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.
+Persistent navigation drawers are acceptable for all sizes larger than mobile.
+They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.
 
 {{demo='pages/demos/drawers/PersistentDrawer.js'}}
 
 ## Mini variant drawer
 
-In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer.
+In this variation, the persistent navigation drawer changes its width.
+Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar.
+When expanded, it appears as the standard persistent navigation drawer.
 
 The mini variant is recommended for apps sections that need quick selection access alongside content.
 
-{{demo='pages/demos/drawers/MiniDrawer.js'}}
+## Responsive drawer
+
+The `Hidden` responsive helper component allows showing different types of drawer depending on the screen width.
+A `temporary` drawer is shown for small screens while a `permanent` drawer is shown for wider screens.
+
+{{demo='pages/demos/drawers/ResponsiveDrawer.js'}}

pages/demos/drawers.js

@@ -36,6 +36,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/drawers/MiniDrawer'), 'utf8')
+`,
+        },
+        'pages/demos/drawers/ResponsiveDrawer.js': {
+          js: require('docs/src/pages/demos/drawers/ResponsiveDrawer').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/drawers/ResponsiveDrawer'), 'utf8')
 `,
         },
       }}