feat(theme): optimize local nav

theme/src/client/components/VPLocalNav.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 defineEmits<(e: 'openMenu') => void>()
 
 const { theme } = useData()
-const { isPosts } = usePostsPageData()
+const { isPosts, isPostsLayout } = usePostsPageData()
 
 const { hasSidebar } = useSidebar()
 const { y } = useWindowScroll()
@@ -38,13 +38,13 @@ const classes = computed(() => {
     'vp-local-nav': true,
     'fixed': empty.value,
     'reached-top': y.value >= navHeight.value,
-    'is-posts': isPosts.value,
+    'is-posts': isPosts.value && !isPostsLayout.value,
     'with-outline': !props.showOutline,
   }
 })
 
 const showLocalNav = computed(() => {
-  return (hasSidebar.value || isPosts.value) && (!empty.value || y.value >= navHeight.value)
+  return (hasSidebar.value || (isPosts.value && !isPostsLayout.value)) && !empty.value
 })
 </script>
 

theme/src/client/components/VPLocalNavOutlineDropdown.vue

@@ -42,11 +42,6 @@ function onItemClick(e: Event) {
     })
   }
 }
-
-function scrollToTop() {
-  open.value = false
-  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-}
 </script>
 
 <template>
@@ -55,16 +50,8 @@ function scrollToTop() {
       {{ theme.outlineLabel || 'On this page' }}
       <span class="vpi-chevron-right icon" />
     </button>
-    <button v-else @click="scrollToTop">
-      {{ theme.returnToTopLabel || 'Return to top' }}
-    </button>
     <Transition name="fade-in-scale-up">
       <div v-if="open" ref="items" class="items" @click="onItemClick">
-        <div class="header">
-          <a class="top-link" href="#" @click="scrollToTop">
-            {{ theme.returnToTopLabel || 'Return to top' }}
-          </a>
-        </div>
         <div class="outline">
           <VPDocOutlineItem :headers="headers" />
         </div>
@@ -131,19 +118,6 @@ function scrollToTop() {
   transition-property: background-color, border, box-shadow;
 }
 
-.header {
-  background-color: var(--vp-c-bg-soft);
-}
-
-.top-link {
-  display: block;
-  padding: 0 16px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 48px;
-  color: var(--vp-c-brand-1);
-}
-
 .outline {
   padding: 8px 0;
   background-color: var(--vp-c-bg-soft);