Using Materialize with Aurelia

I am writing this as I have been struggling with getting the right magic combination of things going to make use of Materialize with Aurelia, and I seem to have eliminated the various errors I was getting, and the side-nav appears and disappears as expected, so I think I am on the right track.

Here’s what I’ve got so far:

jspm install github:Dogfalo/materialize

This installed materialize at version 0.97.5

Then in my `main.js`, I have

import "jquery";
import "Dogfalo/materialize";

I took out the `import “bootstrap”` from there.

I had already deleted most of the default skeleton pages, but I needed to replace my nav-bar.html with:

<template bindable=”router”>
<nav>
<div class=”nav-wrapper”>
<a href=”#” class=”brand-logo”>MyLOGO</a>
<a href=”#” ref=”sideNav” data-activates=”mobile-menu” class=”button-collapse”><i class=”material-icons”>menu</i></a>
   <ul id=”nav-mobile” class=”right hide-on-small”>
<li repeat.for=”route of router.navigation” class=”${route.isActive ? ‘active’ : ‘’}”>
<a href.bind=”route.href”>${route.title}</a>
</li>
</ul>
   <ul class=”side-nav” id=”mobile-menu”>
<li repeat.for=”route of router.navigation”>
<a href.bind=”route.href”>${route.title}</a>
</li>
</ul>
  </div>
</nav>
</template>

Note the 'ref="sideNav"' above — we need that for the following:

Create `nav-bar.js` with this:

export class NavBar {
constructor() {}
  attached() {
$(this.sideNav).sideNav();
}
}

The above can probably be replaced with a custom attribute as per this SO answer.

I was initially trying to follow http://www.eriklieben.com/adding-materializecss-to-the-aurelia-skeleton-project/ but it seems that the latest materialize (0.97.5) works only without using the override file specified there (and that caused me a lot of confusion).

I will add more notes here if I find more issues (and solve them).