fix(theme): don't show outline when no header is there (#2117)

pull/2118/head
Divyansh Singh 2 years ago committed by GitHub
parent 83ce1b8c5e
commit 42a0ef21c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, shallowRef } from 'vue'
import { useData } from '../composables/data' import { useData } from '../composables/data'
import { getHeaders, resolveTitle } from '../composables/outline' import { getHeaders, resolveTitle, type MenuItem } from '../composables/outline'
import VPDocOutlineItem from './VPDocOutlineItem.vue' import VPDocOutlineItem from './VPDocOutlineItem.vue'
import { onContentUpdated } from 'vitepress' import { onContentUpdated } from 'vitepress'
import VPIconChevronRight from './icons/VPIconChevronRight.vue' import VPIconChevronRight from './icons/VPIconChevronRight.vue'
@ -12,16 +12,24 @@ const open = ref(false)
onContentUpdated(() => { onContentUpdated(() => {
open.value = false open.value = false
}) })
const headers = shallowRef<MenuItem[]>([])
onContentUpdated(() => {
headers.value = getHeaders(
frontmatter.value.outline ?? theme.value.outline
)
})
</script> </script>
<template> <template>
<div class="VPDocOutlineDropdown"> <div class="VPDocOutlineDropdown" v-if="headers.length > 0">
<button @click="open = !open" :class="{ open }"> <button @click="open = !open" :class="{ open }">
{{ resolveTitle(theme) }} {{ resolveTitle(theme) }}
<VPIconChevronRight class="icon" /> <VPIconChevronRight class="icon" />
</button> </button>
<div class="items" v-if="open"> <div class="items" v-if="open">
<VPDocOutlineItem :headers="getHeaders(frontmatter.outline ?? theme.outline)" /> <VPDocOutlineItem :headers="headers" />
</div> </div>
</div> </div>
</template> </template>

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick } from 'vue' import { ref, nextTick, shallowRef } from 'vue'
import { useData } from '../composables/data' import { useData } from '../composables/data'
import { getHeaders, resolveTitle } from '../composables/outline' import { getHeaders, resolveTitle, type MenuItem } from '../composables/outline'
import VPDocOutlineItem from './VPDocOutlineItem.vue' import VPDocOutlineItem from './VPDocOutlineItem.vue'
import { onContentUpdated } from 'vitepress' import { onContentUpdated } from 'vitepress'
import VPIconChevronRight from './icons/VPIconChevronRight.vue' import VPIconChevronRight from './icons/VPIconChevronRight.vue'
@ -36,14 +36,25 @@ function scrollToTop() {
open.value = false open.value = false
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
} }
const headers = shallowRef<MenuItem[]>([])
onContentUpdated(() => {
headers.value = getHeaders(
frontmatter.value.outline ?? theme.value.outline
)
})
</script> </script>
<template> <template>
<div class="VPLocalNavOutlineDropdown" :style="{ '--vp-vh': vh + 'px' }"> <div class="VPLocalNavOutlineDropdown" :style="{ '--vp-vh': vh + 'px' }">
<button @click="toggle" :class="{ open }"> <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
{{ resolveTitle(theme) }} {{ resolveTitle(theme) }}
<VPIconChevronRight class="icon" /> <VPIconChevronRight class="icon" />
</button> </button>
<button @click="scrollToTop" v-else>
{{ theme.returnToTopLabel || 'Return to top' }}
</button>
<Transition name="flyout"> <Transition name="flyout">
<div v-if="open" <div v-if="open"
ref="items" ref="items"
@ -53,7 +64,7 @@ function scrollToTop() {
<a class="top-link" href="#" @click="scrollToTop"> <a class="top-link" href="#" @click="scrollToTop">
{{ theme.returnToTopLabel || 'Return to top' }} {{ theme.returnToTopLabel || 'Return to top' }}
</a> </a>
<VPDocOutlineItem :headers="getHeaders(frontmatter.outline ?? theme.outline)" /> <VPDocOutlineItem :headers="headers" />
</div> </div>
</Transition> </Transition>
</div> </div>

Loading…
Cancel
Save