Add button back to top

components/Nav/BackToTop.vue

+
+<!-- from https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/app/BackToTop.vue -->
+<template>
+    <v-layout-item
+      v-scroll="onScroll"
+      class="text-end pointer-events-none"
+      model-value
+      position="bottom"
+      size="88"
+    >
+      <div class="ma-4">
+        <v-fab-transition>
+          <v-btn
+            v-show="model"
+            class="mt-auto pointer-events-initial"
+            color="primary"
+            elevation="8"
+            icon="mdi-chevron-up"
+            size="large"
+            @click="onClick"
+          />
+        </v-fab-transition>
+      </div>
+    </v-layout-item>
+  </template>
+  
+  <script setup>
+    import { ref } from 'vue'
+  
+    const model = ref(false)
+  
+    function onScroll () {
+      model.value = window.scrollY > 200
+    }
+  
+    function onClick () {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  </script>
+  
+  <style scoped>
+    .pointer-events-none {
+      pointer-events: none;
+    }
+  
+    .pointer-events-initial {
+      pointer-events: initial;
+    }
+  </style>
+  
\ No newline at end of file

components/Nav/TableOfContent.vue

@@ -11,19 +11,14 @@ const { mobile } = useDisplay();
 </script>
 
 <template>
-  <v-navigation-drawer
-    v-if="!mobile"
-    id="app-toc"
-    location="right"
-    :border="0"
-    permanent
-  >
+  <v-navigation-drawer v-if="!mobile" id="app-toc" location="right" :border="0" permanent>
     <template #prepend>
       <div class="text-h6 font-weight-medium mt-4 mb-2 ms-4">Contents</div>
     </template>
     <ul class="px-2 py-2">
-      <NavTableOfContentItem :links="props.links" /></ul
-  ></v-navigation-drawer>
+      <NavTableOfContentItem :links="props.links" />
+    </ul>
+  </v-navigation-drawer>
 </template>
 <style scoped>
 #app-toc ul {

layouts/article.vue

@@ -13,7 +13,9 @@ console.log(next)
 </script>
 <template>
   <VApp>
+
     <v-main style="min-height: 300px">
+
       <!-- <v-container class="fill-height w-auto" > -->
       <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
             <v-card-text> -->
@@ -29,11 +31,13 @@ console.log(next)
               color="primary" :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
           </v-col>
         </v-row>
+
       </v-container>
       <Footer></Footer>
     </v-main>
     <NavNavbar />
     <NavTableOfContent :links="page.body.toc.links" />
+    <nav-back-to-top />
   </VApp>
 </template>
 

pages/defense-systems.vue

@@ -42,7 +42,6 @@ const headers = computed(() => {
 });
 const systems = computed(() => {
   return sanitizedData.value.map((content) => {
-    console.log(content)
     return {
       system: { name: content.title, path: content._path },
       ...content[tableKey],