title: Adding Collapsible functions using Material-UI Drawer
body: <p>I was able to setup the Drawer working in my application. One feature I found missing in the default is the collapsible option, where sections are nested. an example is Mail which would have <code>inbox, sent, outbox,</code> etc.</p>
  
  <p>I want it to look something like this:</p>
  
  <p><code>Mail
     Inbox
     Sent
     Outbox</code></p>
  
  <p>How can I do this? This file is shared across the demos.</p>
  
  <pre><code>import React from 'react';
  import { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
  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';
  
  export const mailFolderListItems = (
      &lt;div&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;InboxIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="Inbox" /&gt;
          &lt;/ListItem&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;StarIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="Starred" /&gt;
          &lt;/ListItem&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;SendIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="Send mail" /&gt;
          &lt;/ListItem&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;DraftsIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="Drafts" /&gt;
          &lt;/ListItem&gt;
      &lt;/div&gt;
  );
  
  export const otherMailFolderListItems = (
      &lt;div&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;MailIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="All mail" /&gt;
          &lt;/ListItem&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;DeleteIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="Trash" /&gt;
          &lt;/ListItem&gt;
          &lt;ListItem button&gt;
              &lt;ListItemIcon&gt;
                  &lt;ReportIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary="Spam" /&gt;
          &lt;/ListItem&gt;
      &lt;/div&gt;
  );
  
  //
  </code></pre>