added navbar and footer to main layout; added about and tests routes

app/components/footer.hbs

@@ -0,0 +1,12 @@
+<footer class="menu">
+  <div class="links">
+    {{#each this.links as |link|}}
+      <a href={{link.url}}
+        class="menu-{{link.route}}"
+        target={{link.target}}
+      >
+        {{link.title}}
+      </a>
+    {{/each}}
+  </div>
+</footer>

app/components/footer.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+export default class FooterComponent extends Component {
+  get links() {
+    const links = [];
+
+    links.push({
+      url: 'https://github.com/michaelchadwick/ember-fake-chat',
+      route: 'source',
+      title: 'Github Source',
+      target: '_blank',
+    });
+
+    links.push({
+      url: 'https://guides.emberjs.com/release/components/',
+      route: 'tutorial',
+      title: 'Ember Tutorial',
+      target: '_blank',
+    });
+
+    return links;
+  }
+}

app/components/messages.hbs

@@ -1,3 +1,4 @@
+<h2>Messages</h2>
 <div class="messages">
   {{#each this.messages as |message index|}}
     <Message

app/components/nav-bar.hbs

@@ -0,0 +1,17 @@
+<nav class="menu">
+  <LinkTo @route="index" class="menu-index">
+    <h1>Ember Fake Chat</h1>
+  </LinkTo>
+
+  <div class="links">
+    {{#each this.links as |link|}}
+      <LinkTo
+        @route={{link.route}}
+        class="menu-{{link.route}}"
+        target={{link.target}}
+      >
+        {{link.title}}
+      </LinkTo>
+    {{/each}}
+  </div>
+</nav>

app/components/nav-bar.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import ENV from 'ember-fake-chat/config/environment';
+
+export default class NavBarComponent extends Component {
+  get links() {
+    const links = [];
+
+    links.push({
+      route: 'about',
+      title: 'About',
+      target: '_self',
+    });
+
+    if (ENV.environment != 'production') {
+      links.push({
+        route: 'tests',
+        title: 'Tests',
+        target: '_blank',
+      });
+    }
+
+    return links;
+  }
+}

app/router.js

@@ -1,9 +1,16 @@
 import EmberRouter from '@ember/routing/router';
 import config from 'ember-fake-chat/config/environment';
+import ENV from 'ember-fake-chat/config/environment';
 
 export default class Router extends EmberRouter {
   location = config.locationType;
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  this.route('about');
+
+  if (ENV.environment != 'production') {
+    this.route('tests', { path: '/tests?nocontainer' });
+  }
+});

app/routes/about.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class AboutRoute extends Route {}

app/styles/app.css

@@ -9,6 +9,22 @@ body {
   padding: 0 2em;
 }
 
+a {
+  color: #016aba;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #2e97e7;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+}
+
 form {
   display: grid;
   grid-template-columns: 1fr 6em;
@@ -39,6 +55,50 @@ form > button {
   grid-area: 2 / 2 / 3 / 3;
 }
 
+/**
+ * Top Navigation
+ */
+
+.menu {
+  align-items: baseline;
+  display: flex;
+  height: 5em;
+}
+
+.menu h1 {
+  display: inline-block;
+  padding: 0 0.5em 0 0;
+  font-size: 2.5em;
+  color: #ff6338;
+  text-shadow: 2px 2px 2px #5d0202;
+  text-transform: small-caps;
+}
+
+.menu h1:hover {
+  color: #ff7752;
+}
+
+.menu .links {
+  align-items: center;
+  display: flex;
+  padding: 0.25em 1em;
+}
+
+.menu .links a {
+  display: inline-block;
+  text-decoration: none;
+  padding: 0 1em 0 0;
+  font-size: 20px;
+  font-weight: bold;
+  position: relative;
+  bottom: 5px;
+}
+
+.menu .links a:hover,
+.menu .links a.active {
+  opacity: 1;
+}
+
 .messages {
   background-color: #fdfdfd;
   border-radius: 0.5em;
@@ -127,7 +187,7 @@ form > button {
   background-color: lightgreen;
 }
 
-footer {
+section.debug {
   background-color: #fdfdfd;
   border-radius: 0.5em;
   box-shadow: 0 0.25em 1.5em 0.25em rgba(0 0 0 / 10%);
@@ -136,19 +196,30 @@ footer {
   padding: 1em;
 }
 
-footer .debug {
+section.debug .gallery {
   display: flex;
   gap: 1em;
 }
 
-footer .debug > div {
+section.debug .gallery > div {
   border-radius: 1em;
   box-shadow: 0 0.25em 1.5em 0.25em rgba(0 0 0 / 10%);
   max-width: 175px;
   min-width: 150px;
   padding: 1em;
 }
 
-footer .debug > div h3 {
+section.debug .gallery > div h3 {
   margin-top: 0;
 }
+
+/**
+ * Footer
+ */
+footer.menu {
+  height: 2em;
+  margin: 2em 0;
+  padding: 1em 0 0.25em;
+  background-color: #ffedbb;
+  border-radius: 0.5em;
+}

app/templates/about.hbs

@@ -0,0 +1,15 @@
+<h2>About</h2>
+<p>
+  <strong>Ember Fake Chat</strong>
+  is a web application built to learn about EmberJS Components.
+</p>
+
+<p>
+  It is a poor chat application, however, as it only allows you to read existing
+  hard-coded messages, and only add new ones as anonymous. There are no users,
+  there is no user authentication, and there is no database to keep track of
+  anything.
+</p>
+
+<p>But it's a start!
+</p>

app/templates/application.hbs

@@ -4,18 +4,19 @@
 <HeadLayout />
 
 <header>
-  <h1>Ember Fake Chat</h1>
+  <NavBar />
 </header>
 
 <main>
-  <Messages />
-
   {{outlet}}
 </main>
 
-<footer>
-  <div class="debug">
+<section class="debug">
+  <h3>Debug Stuff</h3>
+  <div class="gallery">
     <DoubleIt />
     <AudioPlayer @srcURL="/assets/audio/fezzish.mp3" @shouldLoop={{true}} />
   </div>
-</footer>
+</section>
+
+<Footer />

app/templates/index.hbs

@@ -0,0 +1 @@
+<Messages />

tests/unit/routes/about-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-fake-chat/tests/helpers';
+
+module('Unit | Route | about', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:about');
+    assert.ok(route);
+  });
+});