NavBar responsive buttons and dropdown

NavBar.jsx

/**
 * Created by nathanleniz on 6/4/15.
 */

if (Meteor.isClient) {
  $(document).ready(function() {
    $(".dropdown-button").dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false,
      hover: true,
      gutter: 0,
      belowOrigin: false
    });
  });
}


NavBar = ReactMeteor.createClass({
  mixins: [ReactMeteor.Mixin],

  templateName: "NavBar",

  render() {
    var mobile = (
      <ul id="dropdown1"
          className="dropdown-content">
        <li><a href="#">Test1</a></li>
        <li><a href="#">Test2</a></li>
        <li><a href="#">Test3</a></li>
      </ul>

    );
    return (
      <div>
        {mobile}
        <nav>
          <div className="nav-wrapper">
            <a href="#" className="brand-logo">MeteoRact</a>
            <ul id="nav-desktop" className="right hide-on-med-and-down">
              <li><a href="#">Test1</a></li>
              <li><a href="#">Test2</a></li>
              <li><a href="#">Test3</a></li>
            </ul>
            <ul className="right hide-on-large-only">
              <li className="hide-on-large-only right">
                <a className="dropdown-button"
                   href="#!" data-activates="dropdown1"
                   ref="dropdown">
                  Menu
                  <i
                    className="mdi-navigation-arrow-drop-down right"/>
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
});