Dynamic ToC added.

client/themes/default/components/page.vue

@@ -600,6 +600,7 @@ export default {
     }
 
     this.$store.set('page/mode', 'view')
+    window.addEventListener('scroll', this.handleScroll)
   },
   mounted () {
     if (this.$vuetify.theme.dark) {
@@ -647,6 +648,9 @@ export default {
       window.boot.notify('page-ready')
     })
   },
+  destroyed () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
   methods: {
     goHome () {
       window.location.assign('/')
@@ -668,6 +672,26 @@ export default {
         })
       }
     },
+    // Highlight the current section items in a sticky table of contents as you scroll down the page.
+    handleScroll () {
+      const scrollPosition = window.scrollY
+      const sections = document.querySelectorAll('h1, h2')
+      const links = document.querySelectorAll('.v-list-item--link') // .v-list-item--link .v-list-item__title
+      const current = []
+      sections.forEach((el) => {
+        if (el.offsetTop <= scrollPosition + 5) {
+          current.push(el)
+        }
+      })
+      const currentSection = current[current.length - 1]
+      const id = currentSection && currentSection.id
+      links.forEach((el) => {
+        el.classList.remove('titleactive')
+        if (el.getAttribute('id') === `#${id}`) {
+          el.classList.add('titleactive')
+        }
+      })
+    },
     pageEdit () {
       this.$root.$emit('pageEdit')
     },
@@ -788,5 +812,12 @@ export default {
     }
   }
 }
-
+.titleactive {
+  background-color:#E1F5FE !important;
+  // add animation
+  transition: background-color 0.5s ease;
+  .v-list-item__title {
+    color: #01579B !important;
+  }
+}
 </style>