From 4591b450f12f904428e48f6af60cb09450c00896 Mon Sep 17 00:00:00 2001
From: "Breno A." <git@breno.tech>
Date: Sat, 18 May 2024 06:03:15 -0300
Subject: [PATCH] fix(theme): Update sidebar on mount and route change

Ensures the sidebar link visibility is maintained not only on page load, but also when the route changes.
---
 .../theme-default/components/VPSidebar.vue    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 6ae0b89e..776fd34e 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useScrollLock } from '@vueuse/core'
-import { inBrowser } from 'vitepress'
+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],
@@ -30,15 +31,26 @@ function scrollActiveLinkIntoView() {
   const activeLink = navEl.value?.querySelector('.is-active')
   if (!activeLink) return
   const rect = activeLink.getBoundingClientRect()
-  const isInViewPort = rect.top >= 0 && rect.bottom <= innerHeight
+  const isInViewPort = rect.top >= 65 && rect.bottom <= innerHeight
   if (!isInViewPort) {
     activeLink.scrollIntoView({ block: 'center' })
   }
 }
 
-onMounted(() => {
+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>