title: React Hamburger menu onclick
body: <p>I have a <code>Nav.js</code> component and using <a href="http://bokuweb.github.io/re-bulma/#NavToggle" rel="nofollow">http://bokuweb.github.io/re-bulma/#NavToggle</a> for styling.</p>
  
  <p>I'm trying to make it so when you click on the hamburger menu that comes with the <code>&lt;NavToggle/&gt;</code> component, that I can set the props to isActive and display the menu.</p>
  
  <p>This is my current <code>Nav.js</code> code:</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router';
  import { prefixLink } from 'gatsby-helpers';
  
  
  
  import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma';
  
  
  
  export default class nav extends React.Component {
    static propTypes = {
      name: React.PropTypes.string,
    };
  
    constructor(props) {
      super(props);
      this.showToggleNav = this.showToggleNav.bind(this);
    }
  
    showToggleNav() {
      this.props.isActive
    }
  
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;Nav&gt;
            &lt;NavGroup align="left"&gt;
              &lt;NavItem&gt;
                &lt;Link to={prefixLink('/')}&gt;
                &lt;h2&gt;Dillon Raphael&lt;/h2&gt;
                &lt;/Link&gt;
              &lt;/NavItem&gt;
            &lt;/NavGroup&gt;
  
            &lt;NavToggle onClick={this.showToggleNav} /&gt;
  
            &lt;NavGroup align="right" isMenu&gt;
              &lt;NavItem&gt;
              &lt;/NavItem&gt;
              &lt;NavItem&gt;
              &lt;/NavItem&gt;
              &lt;NavItem&gt;
                &lt;a href="#" onClick={this.props.showModal}&gt;Let's Work!&lt;/a&gt;
              &lt;/NavItem&gt;
            &lt;/NavGroup&gt;
          &lt;/Nav&gt;
  
  
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><em>Yes, I'm using Gatsby. I love it. It's helping me learn React.</em></p>