Materialize CSS mobile menu with ui-router

I'm trying to use the mobile collapse navbar in Materialize CSS http://materializecss.com/navbar.html with UI router. But the hamburger? (menu 3-stripe) won't show the menu when I click on it <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>.

Is there a way to modify this so I can put this nav in the main page and have ui-router just load the partial pages?

Solution

I had the same issue. To solve it I initialize the JQuery plugin as suggested here: http://materializecss.com/side-nav.html#initialization

Code sample:

<script>
// Initialize collapse button
$(".button-collapse").sideNav();
</script>

<header>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" ui-sref="home" class="brand-logo">Mi Declaración</a>
      <!-- desktop -->
      <ul class="right hide-on-med-and-down">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="contact">Contáctanos</a></li>
      </ul>
      <!-- mobile -->
      <ul id="nav-mobile" class="side-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="contact">Contáctanos</a></li>
      </ul>
      <a href="" class="button-collapse" data-activates="nav-mobile">
        <i class="material-icons">menu</i>
      </a>
    </div>
  </nav>
</header>