perf(theme): improve sidebar transition animation (#540)

* perf(theme): improve sidebar transition animation

* chore: tweak

plugins/plugin-md-power/src/client/index.ts

@@ -1 +1,3 @@
 export * from '../shared/index.js'
+
+export { default as VPFadeInExpandTransition } from './components/VPFadeInExpandTransition.vue'

plugins/plugin-md-power/src/client/shim.d.ts

@@ -1,5 +1,12 @@
 import type { ReplEditorData } from '../shared/repl.js'
 
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}
+
 declare module '@internal/md-power/replEditorData' {
 
   const res: ReplEditorData

plugins/plugin-md-power/tsup.config.ts

@@ -9,6 +9,7 @@ const config = [
 ]
 
 const clientExternal = [
+  /.*\.vue$/,
   /composables\/.*\.js$/,
   /utils\/.*\.js$/,
   /.*\/options\.js$/,

theme/src/client/components/VPSidebarItem.vue

@@ -2,9 +2,12 @@
 import type { ResolvedSidebarItem } from '../../shared/index.js'
 import VPIcon from '@theme/VPIcon.vue'
 import VPLink from '@theme/VPLink.vue'
+import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { computed } from 'vue'
 import { useSidebarControl } from '../composables/index.js'
 
+import '@vuepress/helper/transition/fade-in-height-expand.css'
+
 const props = defineProps<{
   item: ResolvedSidebarItem
   depth: number
@@ -101,16 +104,20 @@ function onCaretClick() {
       </div>
     </div>
 
-    <div v-if="item.items && item.items.length" class="items">
-      <template v-if="depth < 5">
-        <VPSidebarItem
-          v-for="i in item.items"
-          :key="i.text"
-          :item="i"
-          :depth="depth + 1"
-        />
-      </template>
-    </div>
+    <template v-if="item.items && item.items.length && depth < 5">
+      <FadeInExpandTransition>
+        <div v-show="!collapsed">
+          <div class="items">
+            <VPSidebarItem
+              v-for="i in item.items"
+              :key="i.text"
+              :item="i"
+              :depth="depth + 1"
+            />
+          </div>
+        </div>
+      </FadeInExpandTransition>
+    </template>
   </Component>
 </template>
 
@@ -310,8 +317,4 @@ function onCaretClick() {
   border-left: 1px solid var(--vp-c-divider);
   transition: border-left var(--vp-t-color);
 }
-
-.vp-sidebar-item.collapsed .items {
-  display: none;
-}
 </style>