From 3912951bad6f61950ba9da4f5cd3061218903e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=83=BD=E5=AE=81?= <miqilin18@gmail.com>
Date: Fri, 21 Jul 2023 16:13:33 +0800
Subject: [PATCH] fix(theme): respect `--vp-nav-height` in local nav
 calculations (#2663)

---
 .../theme-default/components/VPLocalNav.vue     | 17 +++++++++++++----
 .../components/VPLocalNavOutlineDropdown.vue    |  5 +++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 047e0101..b827798a 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
 import { onContentUpdated } from 'vitepress'
-import { computed, shallowRef } from 'vue'
+import { computed, shallowRef, ref, onMounted } from 'vue'
 import { useData } from '../composables/data'
 import { useSidebar } from '../composables/sidebar'
 import { getHeaders, type MenuItem } from '../composables/outline'
@@ -21,6 +21,15 @@ const { hasSidebar } = useSidebar()
 const { y } = useWindowScroll()
 
 const headers = shallowRef<MenuItem[]>([])
+const navHeight = ref(0)
+
+onMounted(() => {
+  navHeight.value = parseInt(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--vp-nav-height'
+    )
+  )
+})
 
 onContentUpdated(() => {
   headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
@@ -34,14 +43,14 @@ const classes = computed(() => {
   return {
     VPLocalNav: true,
     fixed: empty.value,
-    'reached-top': y.value >= 64
+    'reached-top': y.value >= navHeight.value
   }
 })
 </script>
 
 <template>
   <div
-    v-if="frontmatter.layout !== 'home' && (!empty || y >= 64)"
+    v-if="frontmatter.layout !== 'home' && (!empty || y >= navHeight)"
     :class="classes"
   >
     <button
@@ -57,7 +66,7 @@ const classes = computed(() => {
       </span>
     </button>
 
-    <VPLocalNavOutlineDropdown :headers="headers" />
+    <VPLocalNavOutlineDropdown :headers="headers" :navHeight="navHeight" />
   </div>
 </template>
 
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index a879699b..7b278214 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -6,8 +6,9 @@ import { resolveTitle, type MenuItem } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
 import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
-defineProps<{
+const props = defineProps<{
   headers: MenuItem[]
+  navHeight: number
 }>()
 
 const { theme } = useData()
@@ -21,7 +22,7 @@ onContentUpdated(() => {
 
 function toggle() {
   open.value = !open.value
-  vh.value = window.innerHeight + Math.min(window.scrollY - 64, 0)
+  vh.value = window.innerHeight + Math.min(window.scrollY - props.navHeight, 0)
 }
 
 function onItemClick(e: Event) {