fix(theme): respect `--vp-nav-height` in local nav calculations (#2663)

pull/2664/head
烽宁 1 year ago committed by GitHub
parent 730226c029
commit 3912951bad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useWindowScroll } from '@vueuse/core' import { useWindowScroll } from '@vueuse/core'
import { onContentUpdated } from 'vitepress' import { onContentUpdated } from 'vitepress'
import { computed, shallowRef } from 'vue' import { computed, shallowRef, ref, onMounted } from 'vue'
import { useData } from '../composables/data' import { useData } from '../composables/data'
import { useSidebar } from '../composables/sidebar' import { useSidebar } from '../composables/sidebar'
import { getHeaders, type MenuItem } from '../composables/outline' import { getHeaders, type MenuItem } from '../composables/outline'
@ -21,6 +21,15 @@ const { hasSidebar } = useSidebar()
const { y } = useWindowScroll() const { y } = useWindowScroll()
const headers = shallowRef<MenuItem[]>([]) const headers = shallowRef<MenuItem[]>([])
const navHeight = ref(0)
onMounted(() => {
navHeight.value = parseInt(
getComputedStyle(document.documentElement).getPropertyValue(
'--vp-nav-height'
)
)
})
onContentUpdated(() => { onContentUpdated(() => {
headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline) headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
@ -34,14 +43,14 @@ const classes = computed(() => {
return { return {
VPLocalNav: true, VPLocalNav: true,
fixed: empty.value, fixed: empty.value,
'reached-top': y.value >= 64 'reached-top': y.value >= navHeight.value
} }
}) })
</script> </script>
<template> <template>
<div <div
v-if="frontmatter.layout !== 'home' && (!empty || y >= 64)" v-if="frontmatter.layout !== 'home' && (!empty || y >= navHeight)"
:class="classes" :class="classes"
> >
<button <button
@ -57,7 +66,7 @@ const classes = computed(() => {
</span> </span>
</button> </button>
<VPLocalNavOutlineDropdown :headers="headers" /> <VPLocalNavOutlineDropdown :headers="headers" :navHeight="navHeight" />
</div> </div>
</template> </template>

@ -6,8 +6,9 @@ import { resolveTitle, type MenuItem } from '../composables/outline'
import VPDocOutlineItem from './VPDocOutlineItem.vue' import VPDocOutlineItem from './VPDocOutlineItem.vue'
import VPIconChevronRight from './icons/VPIconChevronRight.vue' import VPIconChevronRight from './icons/VPIconChevronRight.vue'
defineProps<{ const props = defineProps<{
headers: MenuItem[] headers: MenuItem[]
navHeight: number
}>() }>()
const { theme } = useData() const { theme } = useData()
@ -21,7 +22,7 @@ onContentUpdated(() => {
function toggle() { function toggle() {
open.value = !open.value 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) { function onItemClick(e: Event) {

Loading…
Cancel
Save