fix(theme): properly show divider between navs (#2481)

and hide return to top when already at top

src/client/theme-default/components/VPLocalNav.vue

@@ -1,8 +1,12 @@
 <script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+import { onContentUpdated } from 'vitepress'
 import { useData } from '../composables/data'
+import { getHeaders, type MenuItem } from '../composables/outline'
 import { useSidebar } from '../composables/sidebar'
-import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
+import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
 defineProps<{
   open: boolean
@@ -14,10 +18,32 @@ defineEmits<{
 
 const { theme, frontmatter } = useData()
 const { hasSidebar } = useSidebar()
+const { y } = useWindowScroll()
+
+const headers = shallowRef<MenuItem[]>([])
+
+onContentUpdated(() => {
+  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+})
+
+const empty = computed(() => {
+  return headers.value.length === 0 && !hasSidebar.value
+})
+
+const classes = computed(() => {
+  return {
+    VPLocalNav: true,
+    fixed: empty.value,
+    'reached-top': y.value >= 64
+  }
+})
 </script>
 
 <template>
-  <div class="VPLocalNav" v-if="frontmatter.layout !== 'home'">
+  <div
+    v-if="frontmatter.layout !== 'home' && (!empty || y >= 64)"
+    :class="classes"
+  >
     <button
       v-if="hasSidebar"
       class="menu"
@@ -31,7 +57,7 @@ const { hasSidebar } = useSidebar()
       </span>
     </button>
 
-    <VPLocalNavOutlineDropdown />
+    <VPLocalNavOutlineDropdown :headers="headers" />
   </div>
 </template>
 
@@ -45,11 +71,19 @@ const { hasSidebar } = useSidebar()
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-top: 1px solid var(--vp-c-gutter);
   border-bottom: 1px solid var(--vp-c-gutter);
   padding-top: var(--vp-layout-top-height, 0px);
   width: 100%;
   background-color: var(--vp-local-nav-bg-color);
-  transition: border-color 0.5s, background-color 0.5s;
+}
+
+.VPLocalNav.fixed {
+  position: fixed;
+}
+
+.VPLocalNav.reached-top {
+  border-top-color: transparent;
 }
 
 @media (min-width: 960px) {

src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref, nextTick, shallowRef } from 'vue'
+import { onContentUpdated } from 'vitepress'
+import { nextTick, ref } from 'vue'
 import { useData } from '../composables/data'
-import { getHeaders, resolveTitle, type MenuItem } from '../composables/outline'
+import { resolveTitle, type MenuItem } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
-import { onContentUpdated } from 'vitepress'
 import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
-const { frontmatter, theme } = useData()
+defineProps<{
+  headers: MenuItem[]
+}>()
+
+const { theme } = useData()
 const open = ref(false)
 const vh = ref(0)
 const items = ref<HTMLDivElement>()
@@ -36,14 +40,6 @@ function scrollToTop() {
   open.value = false
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
-
-const headers = shallowRef<MenuItem[]>([])
-
-onContentUpdated(() => {
-  headers.value = getHeaders(
-    frontmatter.value.outline ?? theme.value.outline
-  )
-})
 </script>
 
 <template>

src/client/theme-default/components/VPNavBar.vue

@@ -62,15 +62,10 @@ const classes = computed(() => ({
   border-bottom: 1px solid transparent;
   padding: 0 8px 0 24px;
   height: var(--vp-nav-height);
-  transition: border-color 0.5s, background-color 0.5s;
   pointer-events: none;
   white-space: nowrap;
 }
 
-.VPNavBar.has-sidebar {
-  border-bottom-color: var(--vp-c-gutter);
-}
-
 @media (min-width: 768px) {
   .VPNavBar {
     padding: 0 32px;
@@ -79,7 +74,6 @@ const classes = computed(() => ({
 
 @media (min-width: 960px) {
   .VPNavBar.has-sidebar {
-    border-bottom-color: transparent;
     padding: 0;
   }