scroll to top + navbar hide on mobile

docs/.vuepress/theme/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" :clipped-right="$vuetify.breakpoint.lgAndUp" app color="#563f5a" dark>
+  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" :clipped-right="$vuetify.breakpoint.lgAndUp" :hide-on-scroll="$vuetify.breakpoint.mdAndDown" app color="#563f5a" dark>
     <v-app-bar-nav-icon @click.stop="setDrawer" />
     <v-toolbar-title class="ml-0 mr-4 pl-4">
       <v-btn class="hidden-sm-and-down site-title" text link :to="{ path: '/' }"><img src="/dragon_blanc.svg" />&nbsp;{{ $site.title }}</v-btn>

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -13,7 +13,13 @@
             <DefaultGlobalLayout/>
           </v-col>
         </v-row>
+
       </v-container>
+      <v-fab-transition>
+        <v-btn color="primary" class="d-print-none" fab bottom right fixed @click="toTop" v-show="toTopButton" v-scroll="onScroll">
+          <v-icon class="d-print-none">mdi-chevron-up</v-icon>
+        </v-btn>
+    </v-fab-transition>
     </v-content>
 
     <v-bottom-sheet v-model="cookieConsentDialog" persistent>
@@ -48,6 +54,7 @@ export default {
   data () {
     return {
       cookieConsentDialog: true,
+      toTopButton: false
     }
   },
 
@@ -109,6 +116,16 @@ export default {
     setCookieConsent () {
       Cookies.set('heros-et-dragons-cookies', 'compris')
       this.cookieConsentDialog = false
+    },
+
+    onScroll (e) {
+      if (typeof window === 'undefined') return
+      const top = window.pageYOffset ||   e.target.scrollTop || 0
+      this.toTopButton = top > 20
+    },
+
+    toTop () {
+      this.$vuetify.goTo(0)
     }
   }
 }