Began implementing Vue Material

src/app/src/App.vue

@@ -1,12 +1,13 @@
 <template lang="pug">
-#app(role='application')
+md-app(md-waterfall md-mode='fixed-last' role='application')
+  p navigation here
   navigation
-  #content
+  p navigation there
+  md-app-content
     router-view
     vue-progress-bar
     toast(ref='toast')
-  footer.mpj-text-right.mpj-muted-text
-    p
+    p.mpj-muted-text
       | myPrayerJournal v{{ version }}
       br
       em: small.

src/app/src/components/Home.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 article.mpj-main-content(role='main')
   page-title(title='Welcome!'
-             hideOnPage='true')
+             hideOnPage=true)
   p &nbsp;
   p.
     myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,

src/app/src/components/common/Navigation.vue

@@ -1,34 +1,42 @@
 <template lang="pug">
-nav.mpj-top-nav.mpj-bg(role='menubar')
-  router-link.title(:to="{ name: 'Home' }"
-                    role='menuitem')
-    span(style='font-weight:100;') my
-    span(style='font-weight:600;') Prayer
-    span(style='font-weight:700;') Journal
-  router-link(v-if='isAuthenticated'
-              :to="{ name: 'Journal' }"
-              role='menuitem') Journal
-  router-link(v-if='isAuthenticated'
-              :to="{ name: 'ActiveRequests' }"
-              role='menuitem') Active
-  router-link(v-if='hasSnoozed'
-              :to="{ name: 'SnoozedRequests' }"
-              role='menuitem') Snoozed
-  router-link(v-if='isAuthenticated'
-              :to="{ name: 'AnsweredRequests' }"
-              role='menuitem') Answered
-  a(v-if='isAuthenticated'
-    href='#'
-    role='menuitem'
-    @click.stop='logOff()') Log Off
-  a(v-if='!isAuthenticated'
-    href='#'
-    role='menuitem'
-    @click.stop='logOn()') Log On
-  a(href='https://docs.prayerjournal.me'
-    target='_blank'
-    role='menuitem'
-    @click.stop='') Docs
+md-app-toolbar.md-large.md-dense.md-primary
+  .md-toolbar-row
+    .md-toolbar-section-start
+      | howdy
+      span.md-title
+        span(style='font-weight:100;') my
+        span(style='font-weight:600;') Prayer
+        span(style='font-weight:700;') Journal
+    .md-toolbar-section-end
+      | ""
+  .md-toolbar-row
+    md-tabs.md-primary
+      md-tab#mpj-home(md-label='Home'
+                     :to="{ name: 'Home' }")
+      md-tab#mpj-journal(v-if='isAuthenticated'
+                         md-label='Journal'
+                         :to="{ name: 'Journal' }")
+      md-tab#mpj-active(v-if='isAuthenticated'
+                        md-label='Active'
+                        :to="{ name: 'ActiveRequests' }")
+      md-tab#mpj-snoozed(v-if='hasSnoozed'
+                         md-label='Snoozed'
+                         :to="{ name: 'SnoozedRequests' }")
+      md-tab#mpj-answered(v-if='isAuthenticated'
+                          md-label='Answered'
+                          :to="{ name: 'AnsweredRequests' }")
+      md-tab#mpj-log-off(v-if='isAuthenticated'
+                         md-label='Log Off'
+                         href='#'
+                         @click.stop='logOff()')
+      md-tab#mpj-log-on(v-if='!isAuthenticated'
+                        md-label='Log On'
+                        href='#'
+                        @click.stop='logOn()')
+      md-tab#mpj-docs(md-label='Docs'
+                      href='https://docs.prayerjournal.me'
+                      target='_blank'
+                      @click.stop='')
 </template>
 
 <script>

src/app/src/main.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
-import { MdApp, MdTabs, MdProgress } from 'vue-material/dist/components'
+// eslint-disable-next-line
+// import { MdApp, MdContent, MdProgress, MdSnackbar, MdTabs, MdToolbar } from 'vue-material/dist/components'
+import { VueMaterial } from 'vue-material/dist/components'
 import VueProgressBar from 'vue-progressbar'
 import VueToast from 'vue-toast'
 
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default.css'
 import 'vue-toast/dist/vue-toast.min.css'
 
 import App from './App'
@@ -25,9 +29,13 @@ Vue.use(VueProgressBar, {
   }
 })
 
-Vue.use(MdApp)
-Vue.use(MdProgress)
-Vue.use(MdTabs)
+// Vue.use(MdApp)
+// Vue.use(MdContent)
+// Vue.use(MdProgress)
+// Vue.use(MdSnackbar)
+// Vue.use(MdTabs)
+// Vue.use(MdToolbar)
+Vue.use(VueMaterial)
 Vue.component('date-from-now', DateFromNow)
 Vue.component('md-icon', MaterialDesignIcon)
 Vue.component('page-title', PageTitle)