From ca1623432e8ffcdd47f335e0b2f72c1439c4aa91 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:12:09 +0530
Subject: [PATCH 1/2] fix(theme): dont show outline when no header is there

---
 .../theme-default/components/VPDocOutlineDropdown.vue |  8 +++++---
 .../components/VPLocalNavOutlineDropdown.vue          | 11 ++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPDocOutlineDropdown.vue b/src/client/theme-default/components/VPDocOutlineDropdown.vue
index 22d16c82195..9209158d9ed 100644
--- a/src/client/theme-default/components/VPDocOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPDocOutlineDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useData } from '../composables/data'
 import { getHeaders, resolveTitle } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
@@ -12,16 +12,18 @@ const open = ref(false)
 onContentUpdated(() => {
   open.value = false
 })
+
+const headers = computed(() => getHeaders(frontmatter.value.outline ?? theme.value.outline))
 </script>
 
 <template>
-  <div class="VPDocOutlineDropdown">
+  <div class="VPDocOutlineDropdown" v-if="headers.length > 0">
     <button @click="open = !open" :class="{ open }">
       {{ resolveTitle(theme) }}
       <VPIconChevronRight class="icon" />
     </button>
     <div class="items" v-if="open">
-      <VPDocOutlineItem :headers="getHeaders(frontmatter.outline ?? theme.outline)" />
+      <VPDocOutlineItem :headers="headers" />
     </div>
   </div>
 </template>
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index 10e26c8ee7d..bc60da63529 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, computed } from 'vue'
 import { useData } from '../composables/data'
 import { getHeaders, resolveTitle } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
@@ -36,14 +36,19 @@ function scrollToTop() {
   open.value = false
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
+
+const headers = computed(() =>  getHeaders(frontmatter.value.outline ?? theme.value.outline))
 </script>
 
 <template>
   <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) }}
       <VPIconChevronRight class="icon" />
     </button>
+    <button @click="scrollToTop" v-else>
+      {{ theme.returnToTopLabel || 'Return to top' }}
+    </button>
     <Transition name="flyout">
       <div v-if="open"
         ref="items"
@@ -53,7 +58,7 @@ function scrollToTop() {
         <a class="top-link" href="#" @click="scrollToTop">
           {{ theme.returnToTopLabel || 'Return to top' }}
         </a>
-        <VPDocOutlineItem :headers="getHeaders(frontmatter.outline ?? theme.outline)" />
+        <VPDocOutlineItem :headers="headers" />
       </div>
     </Transition>
   </div>

From a49c8f8c031b77f69f679e4e5d64652c08a7cec4 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:17:48 +0530
Subject: [PATCH 2/2] fix ssr

---
 .../components/VPDocOutlineDropdown.vue              | 12 +++++++++---
 .../components/VPLocalNavOutlineDropdown.vue         | 12 +++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPDocOutlineDropdown.vue b/src/client/theme-default/components/VPDocOutlineDropdown.vue
index 9209158d9ed..5cd44a091a5 100644
--- a/src/client/theme-default/components/VPDocOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPDocOutlineDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 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 { onContentUpdated } from 'vitepress'
 import VPIconChevronRight from './icons/VPIconChevronRight.vue'
@@ -13,7 +13,13 @@ onContentUpdated(() => {
   open.value = false
 })
 
-const headers = computed(() => getHeaders(frontmatter.value.outline ?? theme.value.outline))
+const headers = shallowRef<MenuItem[]>([])
+
+onContentUpdated(() => {
+  headers.value = getHeaders(
+    frontmatter.value.outline ?? theme.value.outline
+  )
+})
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index bc60da63529..b68890c8b22 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, nextTick, computed } from 'vue'
+import { ref, nextTick, shallowRef } from 'vue'
 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 { onContentUpdated } from 'vitepress'
 import VPIconChevronRight from './icons/VPIconChevronRight.vue'
@@ -37,7 +37,13 @@ function scrollToTop() {
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
 
-const headers = computed(() =>  getHeaders(frontmatter.value.outline ?? theme.value.outline))
+const headers = shallowRef<MenuItem[]>([])
+
+onContentUpdated(() => {
+  headers.value = getHeaders(
+    frontmatter.value.outline ?? theme.value.outline
+  )
+})
 </script>
 
 <template>