docs: highlight toc based on active headers

Author: MajesticPotatoe

packages/docs/src/components/app/Heading.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="component"
+    v-intersect="href ? onIntersect : undefined"
     :class="classes"
   >
     <router-link
@@ -22,6 +23,10 @@
 <script setup>
   // Utilities
   import { computed } from 'vue'
+  import { storeToRefs } from 'pinia'
+
+  // Composables
+  import { useAppStore } from '@/store/app'
 
   const HEADING_CLASSES = {
     1: 'text-h3 text-sm-h3',
@@ -31,6 +36,8 @@
     5: 'text-subtitle-1 font-weight-medium',
   }
 
+  const { activeHeaders } = storeToRefs(useAppStore())
+
   const props = defineProps({
     content: String,
     href: String,
@@ -39,6 +46,17 @@
 
   const component = computed(() => `h${props.level}`)
   const classes = computed(() => ['v-heading', 'mb-2', HEADING_CLASSES[props.level]])
+
+  function onIntersect (isIntersecting) {
+    if (isIntersecting) {
+      if (!activeHeaders.value.hrefs.includes(props.href)) {
+        activeHeaders.value.hrefs.push(props.href)
+      }
+    } else if (!isIntersecting && activeHeaders.value.hrefs.includes(props.href)) {
+      activeHeaders.value.hrefs.splice(activeHeaders.value.hrefs.indexOf(props.href), 1)
+    }
+    activeHeaders.value.temp = !isIntersecting && !activeHeaders.value.hrefs.length ? props.href : ''
+  }
 </script>
 
 <style lang="sass">

packages/docs/src/components/app/Toc.vue

@@ -2,7 +2,7 @@
   <v-navigation-drawer
     v-if="!route.meta.fluid"
     id="app-toc"
-    v-model="app.toc"
+    v-model="tocDrawer"
     color="background"
     floating
     location="right"
@@ -29,10 +29,9 @@
       >
         <li
           :class="[
-            'ps-3 text-body-2 py-1 font-weight-regular',
+            'ps-3 text-medium-emphasis text-body-2 py-1 font-weight-regular',
             {
-              'text-primary router-link-active': route.hash === to,
-              'text-medium-emphasis': route.hash !== to,
+              'text-primary router-link-active': activeHeaders.temp == to || activeHeaders.hrefs.includes(to),
               'ps-6': level === 3,
               'ps-9': level === 4,
               'ps-12': level === 5,
@@ -126,6 +125,7 @@
 
   // Composables
   import { RouteLocation, Router, useRoute, useRouter } from 'vue-router'
+  import { storeToRefs } from 'pinia'
   import { useAppStore } from '@/store/app'
   // import { useGtag } from 'vue-gtag-next'
   import { useSponsorsStore } from '@/store/sponsors'
@@ -141,7 +141,7 @@
     level: number;
   }
 
-  const app = useAppStore()
+  const { toc: tocDrawer, activeHeaders } = storeToRefs(useAppStore())
 
   function useUpdateHashOnScroll (route: RouteLocation, router: Router) {
     const scrolling = ref(false)

packages/docs/src/store/app.ts

@@ -12,6 +12,10 @@ export type Category = {
 
 export type RootState = {
   apiSearch: string
+  activeHeaders: {
+    hrefs: string[]
+    temp: string
+  }
   drawer: boolean | null
   toc: boolean | null
   items: NavItem[]
@@ -33,6 +37,10 @@ export const useAppStore = defineStore({
   id: 'app',
   state: () => ({
     apiSearch: '',
+    activeHeaders: {
+      hrefs: [],
+      temp: '',
+    },
     drawer: null,
     toc: null,
     items: Array.from(data),