content: import React from 'react';
  import MobileTearSheet from '../../../MobileTearSheet';
  import {List, ListItem} from 'material-ui/List';
  import ActionGrade from 'material-ui/svg-icons/action/grade';
  import ContentInbox from 'material-ui/svg-icons/content/inbox';
  import ContentDrafts from 'material-ui/svg-icons/content/drafts';
  import ContentSend from 'material-ui/svg-icons/content/send';
  import Subheader from 'material-ui/Subheader';
  import Toggle from 'material-ui/Toggle';
  
  export default class ListExampleNested extends React.Component {
  
    state = {
      open: false,
    };
  
    handleToggle = () => {
      this.setState({
        open: !this.state.open,
      });
    };
  
    handleNestedListToggle = (item) => {
      this.setState({
        open: item.state.open,
      });
    };
  
    render() {
      return (
        <div>
          <Toggle
            toggled={this.state.open}
            onToggle={this.handleToggle}
            labelPosition="right"
            label="This toggle controls the expanded state of the submenu item."
          />
          <br />
          <MobileTearSheet>
            <List>
              <Subheader>Nested List Items</Subheader>
              <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
              <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
              <ListItem
                primaryText="Inbox"
                leftIcon={<ContentInbox />}
                initiallyOpen={true}
                primaryTogglesNestedList={true}
                nestedItems={[
                  <ListItem
                    key={1}
                    primaryText="Starred"
                    leftIcon={<ActionGrade />}
                  />,
                  <ListItem
                    key={2}
                    primaryText="Sent Mail"
                    leftIcon={<ContentSend />}
                    disabled={true}
                    nestedItems={[
                      <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                    ]}
                  />,
                  <ListItem
                    key={3}
                    primaryText="Inbox"
                    leftIcon={<ContentInbox />}
                    open={this.state.open}
                    onNestedListToggle={this.handleNestedListToggle}
                    nestedItems={[
                      <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                    ]}
                  />,
                ]}
              />
            </List>
          </MobileTearSheet>
        </div>
      );
    }
  }
  