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.mpj-muted-text
-    p
       | 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')
+md-app-toolbar.md-large.md-dense.md-primary
-  router-link.title(:to="{ name: 'Home' }"
+  .md-toolbar-row
-                    role='menuitem')
+    .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
-  router-link(v-if='isAuthenticated'
+    .md-toolbar-section-end
-              :to="{ name: 'Journal' }"
+      | ""
-              role='menuitem') Journal
+  .md-toolbar-row
-  router-link(v-if='isAuthenticated'
+    md-tabs.md-primary
-              :to="{ name: 'ActiveRequests' }"
+      md-tab#mpj-home(md-label='Home'
-              role='menuitem') Active
+                     :to="{ name: 'Home' }")
-  router-link(v-if='hasSnoozed'
+      md-tab#mpj-journal(v-if='isAuthenticated'
-              :to="{ name: 'SnoozedRequests' }"
+                         md-label='Journal'
-              role='menuitem') Snoozed
+                         :to="{ name: 'Journal' }")
-  router-link(v-if='isAuthenticated'
+      md-tab#mpj-active(v-if='isAuthenticated'
-              :to="{ name: 'AnsweredRequests' }"
+                        md-label='Active'
-              role='menuitem') Answered
+                        :to="{ name: 'ActiveRequests' }")
-  a(v-if='isAuthenticated'
+      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='#'
-    role='menuitem'
+                         @click.stop='logOff()')
-    @click.stop='logOff()') Log Off
+      md-tab#mpj-log-on(v-if='!isAuthenticated'
-  a(v-if='!isAuthenticated'
+                        md-label='Log On'
                         href='#'
-    role='menuitem'
+                        @click.stop='logOn()')
-    @click.stop='logOn()') Log On
+      md-tab#mpj-docs(md-label='Docs'
-  a(href='https://docs.prayerjournal.me'
+                      href='https://docs.prayerjournal.me'
                       target='_blank'
-    role='menuitem'
+                      @click.stop='')
-    @click.stop='') Docs
 </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(MdApp)
-Vue.use(MdProgress)
+// Vue.use(MdContent)
-Vue.use(MdTabs)
+// 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)