title: How to get Material-UI Drawer to 'squeeze' other content when open
body: <p>If anyone is familiar with css and Material UI any help with this would be much appreciated.
  Basically I'm trying to implement a Material UI Drawer component which when opened doesn't just slide out over the top of the page content, but rather the page content conforms around the drawer i.e squeezes or expands. I'm using bootstrap rows and containers in my project, but I have no clue how I'd use them to achieve this. Here's how my component is laid out:</p>
  
  <pre><code>&lt;div&gt;
      &lt;AppBar
      onLeftIconButtonTouchTap={this.handleToggle}
        title="Imaginary Company"
      /&gt;
      &lt;Row&gt;
        &lt;QuotesList /&gt;
      &lt;/Row&gt;
      &lt;Drawer
      containerStyle={{ top: 64, width:150 }}
      open={this.state.open}
      &gt;
        &lt;MenuItem&gt;Menu Item&lt;/MenuItem&gt;
        &lt;MenuItem&gt;Menu Item 2&lt;/MenuItem&gt;
      &lt;/Drawer&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Note the 'top' property is just because I want the top title area of the App Bar to remain visible with the drawer open or close.
  As always any help would be amazing! Cheers</p>
  
  <p>UPDATE: I've found a kind of hacky solution that's working for me. Using the awesome 'styled-components' library (which allows styles to change based on dynamic props you pass in) I was able to create a wrapper component which accepts a 'collapsed' prop, with an animation sliding to the right equal to the drawer's width (150). If anyone stumbles upon this and they're interested here's my code in styled- components (there's a few copied and pasted bootstrap container styles in there as well) :</p>
  
  <pre><code>const CollapsibleContainer = styled.div`
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  $:after {
  content: "";
  display: table;
  clear: both;
  }
  position: absolute;
  right: 0;
  left: ${props =&gt; props.collapsed ? '150px' : '0'}!important;
  transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  `; 
  </code></pre>
  
  <p>Maybe this isn't the perfect solution but it looks fine. Hope this helps someone maybe :)</p>