From 4dc53c0f559036d69f47b788e5324b9926fc7b10 Mon Sep 17 00:00:00 2001
From: "Breno A." <git@breno.tech>
Date: Sat, 18 May 2024 05:40:55 -0300
Subject: [PATCH] feat(theme): Enhance sidebar link visibility

Automatically scrolls to ensure the active sidebar link is in view upon page load.

Co-Authored-By: Bobbie Goede <6649305+bobbiegoede@users.noreply.github.com>
---
 .../theme-default/components/VPSidebar.vue     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index d6c73219..6ae0b89e 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/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 { nextTick, onMounted, ref, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar'
 import VPSidebarItem from './VPSidebarItem.vue'
 
@@ -25,6 +25,20 @@ 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 >= 0 && rect.bottom <= innerHeight
+  if (!isInViewPort) {
+    activeLink.scrollIntoView({ block: 'center' })
+  }
+}
+
+onMounted(() => {
+  nextTick(() => scrollActiveLinkIntoView())
+})
 </script>
 
 <template>
@@ -78,7 +92,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 {