title: Material UI - Open LeftNav / Drawer on AppBar click
body: <p>I'm discovering ReactJS and material-ui (<a href="http://material-ui.com/" rel="noreferrer">http://material-ui.com/</a>).</p>
  
  <p>I try to create a default template for my application.
  I want to use an AppBar and a <strong>LeftNav (renamed in Drawer in new versions)</strong> in separated components.</p>
  
  <p>The AppBar has a menu button on it by default. I want to use it to open the LeftNav but I don't know how I can call my LeftBarComponent component function to open it.</p>
  
  <p>I've almost understood how to communicate between components but in my case, I don't know how I could do because there is no documentation about it.
  The only thing I know to open the LeftNav element is to use LeftNav.toggle() </p>
  
  <p><a href="http://material-ui.com/#/components/left-nav" rel="noreferrer">http://material-ui.com/#/components/left-nav</a></p>
  
  <p>Thanks for your help.</p>
  
  <p><strong>Default.jsx</strong></p>
  
  <pre><code>use strict';
  
  var React = require('react');
  var pageStore = require('../../stores/page');
  
  var MainNavbar = require('../modules/navbar.jsx');
  var LeftNavbar = require('../modules/leftbar.jsx');
  
  var getState = function() {
    return {
      title: pageStore.get().title
    };
  };
  
  var DefaultComponent = React.createClass({
    mixins: [pageStore.mixin],
    componentDidMount: function() {
      pageStore.emitChange();
    },
    getInitialState: function() {
      return getState();
    },
    render: function() {
      return (
        /* jshint ignore:start */
        &lt;div className="main-container"&gt;
          &lt;MainNavbar /&gt;
          &lt;LeftNavbar /&gt;
          &lt;div className="content"&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
        /* jshint ignore:end */
      );
    },
    // Event handler for 'change' events coming from store mixins.
    _onChange: function() {
      this.setState(getState());
    }
  });
  
  module.exports = DefaultComponent;
  </code></pre>
  
  <p><strong>navbar.jsx</strong></p>
  
  <pre><code>'use strict';
  
  var React = require('react');
  var routeActions = require('../../actions/routes');
  
  var MUI = require('material-ui');
  var AppBar = MUI.AppBar;
  
  // Navbar Component
  // Application main menu
  // Usage: &lt;Navbar /&gt;
  var NavbarComponent = React.createClass({
    render: function() {
      return (
        /* jshint ignore:start */
        &lt;AppBar title="MyApp" onMenuIconButtonTouchTap={ this._handleClick }&gt;
          &lt;div className="clear"&gt;&lt;/div&gt;
        &lt;/AppBar&gt;
        /* jshint ignore:end */
      );
    },
    _handleClick: function()
    {
      console.log('ok');
    }
  });
  
  module.exports = NavbarComponent;
  </code></pre>
  
  <p><strong>leftbar.jsx</strong></p>
  
  <pre><code>'use strict';
  
  var React = require('react');
  var routeActions = require('../../actions/routes');
  
  var MUI = require('material-ui');
  var LeftNav = MUI.LeftNav;
  var MenuItem = MUI.MenuItem;
  
  var menuItems = [
    { route: 'home', text: 'Home' },
    { route: 'about', text: 'About' },
  ];
  
  // LeftBar Component
  // Application left menu
  // Usage: &lt;LeftBar /&gt;
  var LeftBarComponent = React.createClass({
    render: function() {
      return (
        /* jshint ignore:start */
        &lt;LeftNav menuItems={menuItems} docked={false} /&gt;
        /* jshint ignore:end */
      );
    },
    _handleClick: function()
    {
      console.log('ok');
    }
  });
  
  module.exports = LeftBarComponent;
  </code></pre>