feat: Improve Sidebar and Aside Link Visibility on Mount and Route Change

src/client/theme-default/components/VPDocAside.vue

@@ -2,12 +2,16 @@
 import { useData } from '../composables/data'
 import VPDocAsideOutline from './VPDocAsideOutline.vue'
 import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
+import { ref, provide } from 'vue'
 
 const { theme } = useData()
+const aside = ref(null)
+
+provide('aside', aside)
 </script>
 
 <template>
-  <div class="VPDocAside">
+  <div class="VPDocAside" ref="aside">
     <slot name="aside-top" />
 
     <slot name="aside-outline-before" />

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onContentUpdated } from 'vitepress'
-import { ref, shallowRef } from 'vue'
+import { inject, ref, type Ref, shallowRef } from 'vue'
 import { useData } from '../composables/data'
 import {
   getHeaders,
@@ -18,10 +18,11 @@ onContentUpdated(() => {
   headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
 })
 
+const aside = inject('aside') as Ref<HTMLElement>
 const container = ref()
 const marker = ref()
 
-useActiveAnchor(container, marker)
+useActiveAnchor(aside, container, marker)
 </script>
 
 <template>

src/client/theme-default/components/VPSidebar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useScrollLock } from '@vueuse/core'
-import { inBrowser } from 'vitepress'
-import { ref, watch } from 'vue'
+import { inBrowser, useRoute } from 'vitepress'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar'
 import VPSidebarItem from './VPSidebarItem.vue'
 
@@ -14,6 +14,7 @@ const props = defineProps<{
 // a11y: focus Nav element when menu has opened
 const navEl = ref<HTMLElement | null>(null)
 const isLocked = useScrollLock(inBrowser ? document.body : null)
+const route = useRoute()
 
 watch(
   [props, navEl],
@@ -25,6 +26,31 @@ watch(
   },
   { immediate: true, flush: 'post' }
 )
+
+function scrollActiveLinkIntoView() {
+  const activeLink = navEl.value?.querySelector('.is-active')
+  if (!activeLink) return
+  const rect = activeLink.getBoundingClientRect()
+  const isInViewPort = rect.top >= 65 && rect.bottom <= innerHeight
+  if (!isInViewPort) {
+    activeLink.scrollIntoView({ block: 'center' })
+  }
+}
+
+function handleScroll() {
+  nextTick(() => scrollActiveLinkIntoView())
+}
+
+
+onMounted(handleScroll)
+watch([props, navEl, route], () => {
+  if (props.open) {
+    isLocked.value = true
+    navEl.value?.focus()
+  } else isLocked.value = false
+
+  handleScroll()
+}, { immediate: true, flush: 'post' })
 </script>
 
 <template>
@@ -78,7 +104,7 @@ watch(
   visibility: visible;
   transform: translateX(0);
   transition: opacity 0.25s,
-    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 .dark .VPSidebar {

src/client/theme-default/composables/outline.ts

@@ -109,6 +109,7 @@ export function resolveHeaders(
 }
 
 export function useActiveAnchor(
+  aside: Ref<HTMLElement>,
   container: Ref<HTMLElement>,
   marker: Ref<HTMLElement>
 ) {
@@ -194,14 +195,19 @@ export function useActiveAnchor(
     }
 
     const activeLink = prevActiveLink
-
     if (activeLink) {
+      const rect = activeLink.getBoundingClientRect()
+      const isInViewPort = rect.top >= 65 && rect.bottom <= innerHeight
       activeLink.classList.add('active')
       marker.value.style.top = activeLink.offsetTop + 39 + 'px'
       marker.value.style.opacity = '1'
+      if (!isInViewPort) {
+        activeLink.scrollIntoView({ block: 'center' })
+      }
     } else {
       marker.value.style.top = '33px'
       marker.value.style.opacity = '0'
+      aside.value.scrollTop = 0
     }
   }
 }