title: Material-ui drawer width issue
body: <p>I'm facing an issue with material-ui drawer. I've changed the width of the drawer container which causes a a problem . The drawer remains a little inside the page and visible but I don't want to make it visible on the page while I haven't clicked the button. It might be having an issue with the transform attribute now.</p>
  
  <p>So I changed it to <strong>transform: translate(350px, 0px)</strong> but then I'm getting another issue, that is if I am clicking the button the drawer is not showing up. <strong>Any help on this thing ??</strong></p>
  
  <p><strong>I have got the solution and edited the code.</strong></p>
  
  <p>I've created a Demo here => <a href="https://stackblitz.com/edit/react-vrcysu" rel="nofollow noreferrer"><strong>Have a look</strong></a></p>
  
  <p>Also shared the code below:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import Hello from './Hello';
  import './style.css';
  import Drawer from 'material-ui/Drawer';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
        openDrawer: false
      };
    }
  
    toggleDrawer() {
      this.setState({
        openDrawer: !this.state.openDrawer
      });
    }
  
    render() {
      return (
        &lt;MuiThemeProvider&gt;
        &lt;div&gt;
          &lt;button onClick={this.toggleDrawer.bind(this)}&gt; Toggle Drawer&lt;/button&gt;
          &lt;Drawer 
                    open={this.state.openDrawer}
                    containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
                    openSecondary={true}
                    docked={true} 
                  &gt;
                      &lt;div className="drawer-title-div"&gt;
                          &lt;h4 className="drawer-title-text"&gt;It's my drawer&lt;/h4&gt;
                      &lt;/div&gt;
                  &lt;/Drawer&gt;
        &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>h1, p {
  
  
  font-family: Lato;
  }
  
  .show-drawer {
    top: 47px !important;
    text-align: left !important;
    width: 80% !important;
    transform: translate(0%, 0px) !important;
  }
  
  .hide-drawer {
    top: 47px !important;
    text-align: left !important;
    width: 80% !important;
    transform: translate(100%, 0px) !important;
  }
  
  /* .drawer-side-drawer:focus {
    top: 47px !important;
    text-align: left !important;
    width: 350px !important;
    transform: translate(0px, 0px) !important;
  } */
  
  .drawer-title-div {
    display: inline-block;
    width: 100%;
    background: #F2F8FB;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);
  }
  
  .drawer-title-text {
    display: inline-block;
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #484848;
    font-family: Muli;
    font-size: 16px;
    font-weight: 600;
  }
  </code></pre>