title: Making Sidebar with material-ui
body: <p>i'm learning material-ui by making the right navigation menu like this one: <a href="http://demo.geekslabs.com/materialize/v3.1/" rel="noreferrer">http://demo.geekslabs.com/materialize/v3.1/</a> or least like this: <a href="http://www.material-ui.com/#/components/app-bar" rel="noreferrer">http://www.material-ui.com/#/components/app-bar</a></p>
  
  <p>I'm using Drawer to make my sidebar, the problem is when the sidebar is toggled, it hides the content on the right. I want when my sidebar is toggled, it took place and push the content to the right and both sidebar and content got their own scrollbar. Here is my current code:</p>
  
  <p>Sidebar.js:</p>
  
  <pre><code>import React from 'react';
  import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import Drawer from 'material-ui/Drawer';
  import MenuItem from 'material-ui/MenuItem';
  import RaisedButton from 'material-ui/RaisedButton';
  import AppBar from 'material-ui/AppBar';
  
  export default class Sidebar extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {open: false};
      }
  
      handleToggle = () =&gt; this.setState({open: !this.state.open});
  
      handleClose = () =&gt; this.setState({open: false});
  
      render() {
          return (
              &lt;MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}&gt;
                  &lt;div&gt;
                      &lt;RaisedButton
                          label="Open Drawer"
                          onTouchTap={this.handleToggle}
                      /&gt;
                      &lt;Drawer
                          containerStyle={{height: 'calc(100% - 64px)', top: 64}}
                          docked={true}
                          width={200}
                          open={this.state.open}
                          onRequestChange={(open) =&gt; this.setState({open})
                          }
                      &gt;
                          &lt;AppBar title="AppBar" /&gt;
                          &lt;MenuItem onTouchTap={this.handleClose}&gt;Menu Item&lt;/MenuItem&gt;
                          &lt;MenuItem onTouchTap={this.handleClose}&gt;Menu Item 2&lt;/MenuItem&gt;
                      &lt;/Drawer&gt;
                  &lt;/div&gt;
              &lt;/MuiThemeProvider&gt;
          );
      }
  }
  </code></pre>
  
  <p>My Layout.js:</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import withStyles from 'isomorphic-style-loader/lib/withStyles';
  import s from './Layout.css';
  import Header from '../Header';
  import Feedback from '../Feedback';
  import Footer from '../Footer';
  import Sidebar from '../Sidebar';
  
  import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import AppBar from 'material-ui/AppBar';
  import injectTapEventPlugin from 'react-tap-event-plugin';
  injectTapEventPlugin();
  
  function Layout({ children }) {
    return (
      &lt;div&gt;
          &lt;MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}&gt;
              &lt;AppBar title="My web" /&gt;
          &lt;/MuiThemeProvider&gt;
  
        &lt;Sidebar/&gt;
        {React.Children.only(children)}
        &lt;Feedback /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  Layout.propTypes = {
    children: PropTypes.element.isRequired,
  };
  
  export default withStyles(s)(Layout);
  </code></pre>