WIP on web UI: added nav, routing, basic page skeletons.

web/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

web/src/views/Dashboard.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="dashboard">
+    <h1>Dashboard</h1>
+  </div>
+</template>
+<script lang="ts" src="./dashboard.ts"></script>

web/src/views/Home.vue

@@ -1,6 +0,0 @@
-<template>
-  <div class="home">
-  </div>
-</template>
-
-<script lang="ts" src="./home.ts"></script>

web/src/views/Measures.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="measures">
+    <h1>Things You Are Measuring</h1>
+  </div>
+</template>
+<script lang="ts" src="./measures.ts"></script>

web/src/views/NavBar.vue

@@ -1,5 +1,28 @@
 <template>
-
+  <nav v-bind:class='collapsed ? "collapsed" : "expanded"'>
+    <h1 class=logo>
+      <span class=expanded>Personal Measure</span>
+      <span class=collapsed>PM</span>
+    </h1>
+    <router-link to="/dashboard">
+      <fa-icon icon=home></fa-icon>
+      <span class=expanded>Dashboard</span>
+    </router-link>
+    <router-link to="/measures">
+      <fa-icon icon=pencil-ruler></fa-icon>
+      <span class=expanded>Measures</span>
+    </router-link>
+    <router-link to="/user-account">
+      <fa-icon icon=user></fa-icon>
+      <span class=expanded>Your Account</span>
+    </router-link>
+    <div class=collapse-handle tabindex="0"
+         v-on:click='toggleCollapsed()'
+         v-on:keypress='toggleCollapsed()'>
+      <span class=collapsed><fa-icon icon=angle-double-right></fa-icon></span>
+      <span class=expanded><fa-icon icon=angle-double-left></fa-icon></span>
+    </div>
+  </nav>
 </template>
 <script lang="ts" src="./nav-bar.ts"></script>
 <style lang="scss" src="./nav-bar.scss"></style>

web/src/views/UserAccount.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class=user-account>
+    <h1>Your Account</h1>
+  </div>
+</template>
+<script lang="ts" src="./user-account.ts"></script>

web/src/views/dashobard.ts

@@ -0,0 +1,4 @@
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class Dashboard extends Vue {}

web/src/views/measures.ts

@@ -0,0 +1,6 @@
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({
+  components: { }
+})
+export default class Measures extends Vue {}

web/src/views/nav-bar.scss

@@ -0,0 +1,49 @@
+@import '~@/styles/vars';
+
+nav {
+  background-color: $color1;
+  color: $fg-primary;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Exo 2';
+
+  &.expanded {
+    .collapsed { display: none; }
+    .collapse-handle { align-self: flex-end; }
+  }
+
+  &.collapsed {
+    .expanded { display: none; }
+    svg { font-size: 2.2rem; }
+    .collapse-handle { align-self: center; }
+  }
+
+  a {
+    color: inherit;
+    display: block;
+    font-size: 1.5rem;
+    padding: .5rem 0;
+    text-decoration: none;
+    width: 100%;
+
+    &.router-link-active { color: $color3; }
+
+    &:hover { color: $color3; }
+
+    svg {
+      display: inline-block;
+      min-width: 1.5em;
+    }
+  }
+
+  .logo {
+    color: $color4;
+    padding: 0 0 1rem;
+  }
+
+  .collapse-handle {
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin-top: auto;
+  }
+}

web/src/views/nav-bar.ts

@@ -1,6 +1,26 @@
 import { Component, Vue } from 'vue-property-decorator';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faAngleDoubleLeft, faAngleDoubleRight,
+         faPencilRuler, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+// import UiIconButton from 'keen-ui/src/UiIconButton.vue';
+
+library.add(faAngleDoubleLeft, faAngleDoubleRight, faPencilRuler, faHome, faUser);
+
 @Component({
   components: {
+    // UiIconButton
   }
 })
-export default class NavBar extends Vue {}
+export default class NavBar extends Vue {
+  private collapsed: boolean;
+
+  constructor() {
+    super();
+    this.collapsed = false;
+  }
+
+  public toggleCollapsed(): boolean {
+    this.collapsed = !this.collapsed;
+    return this.collapsed;
+  }
+}

web/src/views/user-account.ts

@@ -0,0 +1,4 @@
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class UserAccount extends Vue {}