Issue 488 Fix top navbar

app/es-navbar-links.js

@@ -0,0 +1,123 @@
+export default [{
+  name: 'Docs',
+  type: 'dropdown',
+  items: [{
+    href: 'https://guides.emberjs.com',
+    name: 'Guides',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/api',
+    name: 'API Reference',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'https://emberjs.com/learn',
+    name: 'Learn Ember',
+    type: 'link'
+  }]
+}, {
+  name: 'Releases',
+  type: 'dropdown',
+  items: [{
+    href: 'https://emberjs.com/builds',
+    name: 'Channels',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/builds/release',
+    name: '-- Stable',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/builds/beta',
+    name: '-- Beta',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/builds/canary',
+    name: '-- Canary',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'https://emberjs.com/deprecations',
+    name: 'Deprecations',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/statusboard',
+    name: 'Status Board',
+    type: 'link'
+  }]
+}, {
+  href: 'https://emberjs.com/blog',
+  name: 'Blog',
+  type: 'link'
+}, {
+  name: 'Community',
+  type: 'dropdown',
+  items: [{
+    href: 'https://emberjs.com/community',
+    name: 'The Ember Community',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/guidelines',
+    name: 'Guidelines',
+    type: 'link'
+  }, {
+    href: 'http://github.com/emberjs/',
+    name: 'Contribute (Github)',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'https://emberjs.com/community/meetups',
+    name: 'Meetups',
+    type: 'link'
+  }, {
+    href: 'http://jobs.emberjs.com/',
+    name: 'Job Board',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'http://emberconf.com/',
+    name: 'Ember Conf',
+    type: 'link'
+  }]
+}, {
+  name: 'About',
+  type: 'dropdown',
+  items: [{
+    href: 'https://emberjs.com/team',
+    name: 'The Team',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'https://emberjs.com/logos',
+    name: 'Logos',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/mascots',
+    name: 'Mascots',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'https://emberjs.com/ember-users',
+    name: 'Who Uses Ember',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/sponsors',
+    name: 'Sponsors',
+    type: 'link'
+  }, {
+    type: 'divider'
+  }, {
+    href: 'https://emberjs.com/legal',
+    name: 'Legal',
+    type: 'link'
+  }, {
+    href: 'https://emberjs.com/security',
+    name: 'Security',
+    type: 'link'
+  }]
+}];

app/routes/application.js

@@ -1,8 +1,9 @@
-import Route from '@ember/routing/route';
-import { set } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
 import ENV from 'ember-api-docs/config/environment';
 import getCompactVersion from 'ember-api-docs/utils/get-compact-version';
+import esNavbarLinks from '../es-navbar-links';
+import Route from '@ember/routing/route';
 
 export default Route.extend({
   headData: service(),
@@ -20,6 +21,16 @@ export default Route.extend({
     }
     return '';
   },
+
+  setupController(controller, model) {
+    if (!model) {
+      model = {};
+    }
+
+    model.esNavbarLinks = esNavbarLinks;
+    this._super(controller, model);
+  },
+
   afterModel() {
     set(this, 'headData.cdnDomain', ENV.API_HOST);
     return this._super(...arguments);

app/templates/application.hbs

@@ -1,23 +1,9 @@
-<header class="header responsive">
-  <nav role="navigation" aria-label="main">
-    <ul class="header-nav container">
-      <li class="header-logo">
-        <a href="http://emberjs.com/"><span class="visually-hidden">Ember homepage</span></a>
-      </li>
-      <li><a href="/learn">Learn</a></li>
-      <li><a href="http://guides.emberjs.com">Guides</a></li>
-      <li class="api-docs">{{link-to 'API' 'index'}}</li>
-      <li><a href="/community">Community</a></li>
-      <li><a href="/blog">Blog</a></li>
-      <li><a href="/builds">Builds</a></li>
-      <li class="header-search">
-        {{search-input}}
-      </li>
-    </ul>
-  </nav>
-</header>
+{{#es-header}}
+  {{es-navbar links=model.esNavbarLinks}}
+{{/es-header}}
 
 <main class="container">
   {{outlet}}
 </main>
+
 {{main-footer}}

ember-cli-build.js

@@ -40,6 +40,11 @@ module.exports = function(defaults) {
     'ember-cli-babel': {
       includePolyfill: true,
     },
+    "ember-bootstrap": {
+      bootstrapVersion: 4,
+      importBootstrapFont: false,
+      importBootstrapCSS: false
+    }
   });
 
   let mappingsTree = new Funnel('node_modules/ember-rfc176-data/', {

package.json

@@ -79,6 +79,7 @@
     "ember-resolver": "^4.3.0",
     "ember-route-action-helper": "^2.0.5",
     "ember-source": "^2.14.1",
+    "ember-styleguide": "^1.1.0",
     "ember-svg-jar": "^0.11.1",
     "ember-test-selectors": "^0.3.6",
     "ember-tether": "1.0.0-beta.0",