Materialize sidebar navigation stops working after installation of iron:router in meteor app

Question

I attempting to build a Meteor app using Materialise ( http://materializecss.com ) as styling framework.

I began by replacing the default meteor app with the materialise starter template.

When the browser window is shrunk sufficiently the navbar items shrink to the 'hamburger' icon but when you click on it the items appear.

Critical to making this work seemed to be installation of this javascript code

 if (Meteor.isClient) { Meteor.startup(function () { $(".button-collapse").sideNav(); }); } 

All good so far

But...

Next I installed added iron:router to my project and after defining routes (and a template) I could see the starter template page again but the sideNav bars are no longer triggered when I 'click' on the hamburger icon.

How can I restore a functioning navigation sidebar?

Answer 1

Simplest answer is to make that $(".button-collapse").sideNav(); call in the onRendered() event function of the template in which the button is found:

<template name="navigation">
  ...
  <a class="button-collapse">...</a>
  ... 
</template>

Template.navigation.onRendered(function(){
   $(".button-collapse").sideNav();
});

This should do it.