fix: basic breadcrumbs + source view on mobile

client/components/source.vue

@@ -4,9 +4,10 @@
     v-content
       v-toolbar(color='primary', dark)
         .subheading Viewing source of page #[strong /{{path}}]
-        v-spacer
+        template(v-if='$vuetify.breakpoint.mdAndUp')
-        .caption.blue--text.text--lighten-3 ID {{pageId}}
+          v-spacer
-        v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
+          .caption.blue--text.text--lighten-3 ID {{pageId}}
+          v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
       v-card(tile)
         v-card-text
           v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')

client/themes/default/components/page.vue

@@ -30,17 +30,16 @@
 
     v-content(ref='content')
       template(v-if='path !== `home`')
-        v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
+        v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
-          v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
+          //- v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
-            v-icon(color='grey darken-2', left) menu
+          //-   v-icon(color='grey darken-2', left) menu
-            span Navigation
+          //-   span Navigation
           v-breadcrumbs.breadcrumbs-nav.pl-0(
-            v-else
             :items='breadcrumbs'
             divider='/'
             )
             template(slot='item', slot-scope='props')
-              v-icon(v-if='props.item.path === "/"', small) home
+              v-icon(v-if='props.item.path === "/"', small, @click='goHome') home
               v-btn.ma-0(v-else, :href='props.item.path', small, flat) {{props.item.name}}
           template(v-if='!isPublished')
             v-spacer
@@ -128,6 +127,7 @@
 import { StatusIndicator } from 'vue-status-indicator'
 import Prism from '@/libs/prism/prism.js'
 import { get } from 'vuex-pathify'
+import _ from 'lodash'
 
 export default {
   components: {
@@ -193,11 +193,6 @@ export default {
         offset: -75,
         easing: 'easeInOutCubic'
       },
-      breadcrumbs: [
-        { path: '/', name: 'Home' },
-        { path: '/' + this.path, name: 'Breadcrumb' },
-        { path: '/' + this.path, name: 'Coming soon' }
-      ],
       scrollStyle: {
         vuescroll: {},
         scrollPanel: {
@@ -227,6 +222,15 @@ export default {
       set (val) {
 
       }
+    },
+    breadcrumbs() {
+      return [{ path: '/', name: 'Home' }].concat(_.reduce(this.path.split('/'), (result, value, key) => {
+        result.push({
+          path: _.map(result, 'path').join('/') + `/${value}`,
+          name: value
+        })
+        return result
+      }, []))
     }
   },
   created() {
@@ -249,6 +253,9 @@ export default {
     this.navShown = this.$vuetify.breakpoint.smAndUp
   },
   methods: {
+    goHome () {
+      window.location.assign('/')
+    },
     toggleNavigation () {
       this.navOpen = !this.navOpen
     },