[docs] Add a NestedList example (mui#7995)

* Adding NestedList example

* disabling flow for NestedList

docs/src/modules/components/AppDrawerNavItem.js

@@ -36,7 +36,7 @@ const styles = theme => ({
   },
   navLinkButton: {
     color: theme.palette.text.secondary,
-    textIndent: 24,
+    textIndent: theme.spacing.unit * 3,
     fontSize: 13,
   },
   activeButton: {

docs/src/pages/demos/lists/NestedList.js

@@ -0,0 +1,74 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import ListSubheader from 'material-ui/List/ListSubheader';
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
+import Collapse from 'material-ui/transitions/Collapse';
+import InboxIcon from 'material-ui-icons/MoveToInbox';
+import DraftsIcon from 'material-ui-icons/Drafts';
+import SendIcon from 'material-ui-icons/Send';
+import ExpandLess from 'material-ui-icons/ExpandLess';
+import ExpandMore from 'material-ui-icons/ExpandMore';
+import StarBorder from 'material-ui-icons/StarBorder';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: theme.palette.background.paper,
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class NestedList extends React.Component {
+  state = { open: true };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <List className={classes.root} subheader={<ListSubheader>Nested List Items</ListSubheader>}>
+        <ListItem button>
+          <ListItemIcon>
+            <SendIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Sent mail" />
+        </ListItem>
+        <ListItem button>
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Drafts" />
+        </ListItem>
+        <ListItem button onClick={this.handleClick}>
+          <ListItemIcon>
+            <InboxIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Inbox" />
+          {this.state.open ? <ExpandMore /> : <ExpandLess />}
+        </ListItem>
+        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Starred" />
+          </ListItem>
+        </Collapse>
+      </List>
+    );
+  }
+}
+
+NestedList.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(NestedList);

docs/src/pages/demos/lists/lists.md

@@ -22,6 +22,10 @@ Lists are best suited for similar data types.
 
 {{demo='pages/demos/lists/InsetList.js'}}
 
+### Nested List
+
+{{demo='pages/demos/lists/NestedList.js'}}
+
 ## List Controls
 
 ### Checkbox

pages/demos/lists.js

@@ -29,6 +29,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/lists/InsetList'), 'utf8')
+`,
+        },
+        'pages/demos/lists/NestedList.js': {
+          js: require('docs/src/pages/demos/lists/NestedList').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/lists/NestedList'), 'utf8')
 `,
         },
         'pages/demos/lists/CheckboxList.js': {