Bootstrap navbar collapse

14

Tried this addon. There is a flickering issue with the “data-toggle” used in the menu link. The flickering will happen when on desktop version. I finally used the “visible-xs” to fix the flickering and just used attribute binding to allow data-attributes used on the link-to. Here is the code.

//app/initializers/data-attribute.js
import Ember from 'ember';

export function initialize(/* application */) {
  const attributeNames = ['data-auto-id', 'data-toggle', 'data-target'];

  Ember.TextField.reopen({
    attributeBindings: attributeNames
  });

  Ember.LinkComponent.reopen({
    attributeBindings: attributeNames
  });

  Ember.TextArea.reopen({
    attributeBindings: attributeNames
  });
}

export default {
  name: 'data-attribute',
  initialize
};

template:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand"></a>
    </div>
    <div class="collapse navbar-collapse" id="hw-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="font-kai">{{#link-to 'works' current-when='works work' class='hidden-xs'}}{{t "menu.works"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'works' current-when='works work' data-toggle='collapse' data-target='.navbar-collapse' class='visible-xs'}}{{t "menu.works"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'proses' current-when='proses prose' class='hidden-xs'}}{{t "menu.proses"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'proses' current-when='proses prose' data-toggle='collapse' data-target='.navbar-collapse' class='visible-xs'}}{{t "menu.proses"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'quotes' current-when='quotes quote' class='hidden-xs'}}{{t "menu.quotes"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'quotes' current-when='quotes quote' data-toggle='collapse' data-target='.navbar-collapse' class='visible-xs'}}{{t "menu.quotes"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'people' current-when='people person' class='hidden-xs'}}{{t "menu.people"}}{{/link-to}}</li>
        <li class="font-kai">{{#link-to 'people' current-when='people person' data-toggle='collapse' data-target='.navbar-collapse' class='visible-xs'}}{{t "menu.people"}}{{/link-to}}</li>
      </ul>
    </div>
  </div>
</nav>