1

When I decrease the screen size and it switches to a mobile view, the Menu toggle button does not open the menu, but takes me to the main page. 

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1>{{#link-to 'index'}}Welcome :{{/link-to}}</h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>
  <section class="top-bar-section">
    <ul class='right'>
      <li>
        {{#link-to 'main.users'}}Users{{/link-to}}
      </li>
      <li>
        {{#link-to 'main.org'}}Organizations{{/link-to}}
      </li>
    </ul>
  </section>
</nav>
JDillon522
  • 19,046
  • 15
  • 47
  • 81

1 Answers1

3

If you have your navigation in your application.hbs then you can use didInsertElement hook in the application view to hookup your foundation events.

You will need to have loaded the foundation dependences I have this answer here.

App.ApplicationView = Em.View.extend({

  didInsertElement: function() {
    this.$().foundation('topbar');
  },

  willDestroyElement: function() {
    this.$().foundation('topbar', 'off');
  }
});

Here is a working JSBin

Cheers

Community
  • 1
  • 1
kiwiupover
  • 1,782
  • 12
  • 26
  • Humm, I actually have my navbar as a partial inserted into my routes. So I have an `index` and a `main` route. I tried creating an `App.IndexView` but it didnt take. The odd thing is I dont get any errors. – JDillon522 Apr 04 '14 at 20:56
  • I just updated the answer and made a js bin for you. You don't need to have the nav in a partial for every page you can add it to the top of the nested routes. – kiwiupover Apr 04 '14 at 21:47
  • Ahh I was forgetting the `this.` . N00b move – JDillon522 Apr 07 '14 at 16:39
  • @kiwiupover you're missing the `$` inside willDestroyElement method, as in `this.$()` – Elise Chant Jul 15 '14 at 02:09