Use styleguide navbar to make consistent with the rest of the site

app/controllers/application.js

@@ -0,0 +1,134 @@
+import Controller from '@ember/controller';
+
+const links = [{
+  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'
+  }]
+}];
+
+export default Controller.extend({
+  links: null,
+
+  init() {
+    this._super(...arguments);
+    this.links = links;
+  }
+});

app/styles/_class.scss

@@ -1,6 +1,6 @@
 article.chapter {
   h1.module-name {
-    display: inline-block;
+    display: inline;
   }
 
   .heading__link__edit {

app/styles/app.scss

@@ -29,7 +29,7 @@ body {
     margin-bottom: 0;
     overflow:auto;
     padding: $base-spacing;
-
+    min-width: auto;
     &::after {
       clear: both;
       display: table;
@@ -40,7 +40,6 @@ body {
   main.container .content .chapter {
     width: 800px;
     max-width: 100%;
-    margin: 0 auto;
   }
 }
 

app/styles/components/_header.scss

@@ -38,6 +38,12 @@ $white: white;
   font-family: 'Source Sans Pro';
 }
 
+.es-header {
+  font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+}
+
 .header .container {
   display: flex;
   display: -webkit-flex;

app/templates/application.hbs

@@ -1,22 +1,8 @@
-<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=links}}
+    {{search-input}}
+  {{/es-navbar}}
+{{/es-header}}
 <main class="container">
   {{outlet}}
 </main>

package.json

@@ -58,7 +58,7 @@
     "ember-cli-inject-live-reload": "^1.7.0",
     "ember-cli-meta-tags": "^5.0.0",
     "ember-cli-qunit": "^4.3.0",
-    "ember-cli-sass": "^7.0.0",
+    "ember-cli-sass": "^8.0.1",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-template-lint": "^0.7.1",
     "ember-cli-uglify": "^1.2.0",
@@ -80,7 +80,8 @@
     "ember-resolver": "^4.3.0",
     "ember-route-action-helper": "^2.0.5",
     "ember-source": "^2.14.1",
-    "ember-svg-jar": "^0.11.1",
+    "ember-styleguide": "^2.3.1",
+    "ember-svg-jar": "^1.2.2",
     "ember-test-selectors": "^0.3.6",
     "ember-tether": "1.0.0-beta.0",
     "ember-truth-helpers": "^1.3.0",
@@ -91,6 +92,7 @@
     "minimist": "^1.2.0",
     "normalize.css": "^7.0.0",
     "qunit-dom": "^0.3.2",
+    "sass": "^1.14.3",
     "spawndamnit": "2.0.0"
   },
   "engines": {