From e8860a54ecab6c55d60063c8d69f6d63c6988d15 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 30 Mar 2025 03:50:27 +0800
Subject: [PATCH] perf(theme): improve sidebar transition animation (#540)

* perf(theme): improve sidebar transition animation

* chore: tweak
---
 plugins/plugin-md-power/src/client/index.ts   |  2 ++
 plugins/plugin-md-power/src/client/shim.d.ts  |  7 +++++
 plugins/plugin-md-power/tsup.config.ts        |  1 +
 theme/src/client/components/VPSidebarItem.vue | 31 ++++++++++---------
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/plugins/plugin-md-power/src/client/index.ts b/plugins/plugin-md-power/src/client/index.ts
index 72593733..e2068e30 100644
--- a/plugins/plugin-md-power/src/client/index.ts
+++ b/plugins/plugin-md-power/src/client/index.ts
@@ -1 +1,3 @@
 export * from '../shared/index.js'
+
+export { default as VPFadeInExpandTransition } from './components/VPFadeInExpandTransition.vue'
diff --git a/plugins/plugin-md-power/src/client/shim.d.ts b/plugins/plugin-md-power/src/client/shim.d.ts
index 16ffdc92..336bb25d 100644
--- a/plugins/plugin-md-power/src/client/shim.d.ts
+++ b/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
diff --git a/plugins/plugin-md-power/tsup.config.ts b/plugins/plugin-md-power/tsup.config.ts
index 32f833c7..96bc85f6 100644
--- a/plugins/plugin-md-power/tsup.config.ts
+++ b/plugins/plugin-md-power/tsup.config.ts
@@ -9,6 +9,7 @@ const config = [
 ]
 
 const clientExternal = [
+  /.*\.vue$/,
   /composables\/.*\.js$/,
   /utils\/.*\.js$/,
   /.*\/options\.js$/,
diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue
index 7da0f378..f6d79c7e 100644
--- a/theme/src/client/components/VPSidebarItem.vue
+++ b/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>