From 545442b8fc5edcaceac58ea5771f33f6fdac51de Mon Sep 17 00:00:00 2001
From: "Breno A." <git@breno.tech>
Date: Sat, 18 May 2024 05:16:10 -0300
Subject: [PATCH] feat(theme): adjust aside-container offsetTop

---
 src/client/theme-default/components/VPDocAside.vue   |  6 +++++-
 .../theme-default/components/VPDocAsideOutline.vue   |  5 +++--
 src/client/theme-default/composables/outline.ts      | 12 ++++--------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue
index 314e8a4b..94842dd2 100644
--- a/src/client/theme-default/components/VPDocAside.vue
+++ b/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" />
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index 4eb59ebc..3a6bb1be 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/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>
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
index c8511626..fd417e9e 100644
--- a/src/client/theme-default/composables/outline.ts
+++ b/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,24 +195,19 @@ export function useActiveAnchor(
     }
 
     const activeLink = prevActiveLink
-    const asideContainer =
-      container.value.parentElement?.parentElement?.parentElement
     if (activeLink) {
-      const offsetTop = activeLink.offsetTop + 39
       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 (asideContainer && !isInViewPort) {
-        asideContainer.scrollTop = offsetTop
+      if (!isInViewPort) {
+        activeLink.scrollIntoView({ block: 'center' })
       }
     } else {
       marker.value.style.top = '33px'
       marker.value.style.opacity = '0'
-      if (asideContainer) {
-        asideContainer.scrollTop = 0
-      }
+      aside.value.scrollTop = 0
     }
   }
 }