From 400bf02856e92bb0fd2d8f87a1a30e7cbce9e308 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 15 Jul 2024 21:06:46 +0800
Subject: [PATCH] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=20=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=20=E5=88=86=E7=BB=84=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/VPSidebar.vue     | 23 +-------
 .../src/client/components/VPSidebarGroup.vue  | 55 +++++++++++++++++++
 theme/src/client/components/VPSidebarItem.vue |  2 +-
 3 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 theme/src/client/components/VPSidebarGroup.vue

diff --git a/theme/src/client/components/VPSidebar.vue b/theme/src/client/components/VPSidebar.vue
index 4ded9b4c..da2e5bc3 100644
--- a/theme/src/client/components/VPSidebar.vue
+++ b/theme/src/client/components/VPSidebar.vue
@@ -2,7 +2,7 @@
 import { useScrollLock } from '@vueuse/core'
 import { onMounted, ref, watch } from 'vue'
 import { useRoutePath } from 'vuepress/client'
-import VPSidebarItem from '@theme/VPSidebarItem.vue'
+import VPSidebarGroup from '@theme/VPSidebarGroup.vue'
 import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
@@ -71,13 +71,7 @@ onMounted(() => {
 
           <slot name="sidebar-nav-before" />
 
-          <div
-            v-for="item in sidebarGroups"
-            :key="item.text"
-            class="group"
-          >
-            <VPSidebarItem :item="item" :depth="0" />
-          </div>
+          <VPSidebarGroup :items="sidebarGroups" />
 
           <slot name="sidebar-nav-after" />
         </nav>
@@ -170,17 +164,4 @@ onMounted(() => {
 .nav {
   outline: 0;
 }
-
-.group + .group {
-  padding-top: 10px;
-  border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
-}
-
-@media (min-width: 960px) {
-  .group {
-    width: calc(var(--vp-sidebar-width) - 64px);
-    padding-top: 10px;
-  }
-}
 </style>
diff --git a/theme/src/client/components/VPSidebarGroup.vue b/theme/src/client/components/VPSidebarGroup.vue
new file mode 100644
index 00000000..28ebb46b
--- /dev/null
+++ b/theme/src/client/components/VPSidebarGroup.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import type { ResolvedSidebarItem } from '../../shared/resolved/sidebar.js'
+import VPSidebarItem from './VPSidebarItem.vue'
+
+defineProps<{
+  items: ResolvedSidebarItem[]
+}>()
+
+const disableTransition = ref(true)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    timer = null
+    disableTransition.value = false
+  }, 300)
+})
+
+onBeforeUnmount(() => {
+  if (timer != null) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <div
+    v-for="item in items"
+    :key="item.text"
+    class="group"
+    :class="{ 'no-transition': disableTransition }"
+  >
+    <VPSidebarItem :item="item" :depth="0" />
+  </div>
+</template>
+
+<style scoped>
+.no-transition :deep(.caret-icon) {
+  transition: none;
+}
+
+.group + .group {
+  padding-top: 10px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+@media (min-width: 960px) {
+  .group {
+    width: calc(var(--vp-sidebar-width) - 64px);
+    padding-top: 10px;
+  }
+}
+</style>
diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue
index e5bdad62..b0f3a2ce 100644
--- a/theme/src/client/components/VPSidebarItem.vue
+++ b/theme/src/client/components/VPSidebarItem.vue
@@ -56,7 +56,7 @@ function onCaretClick() {
 </script>
 
 <template>
-  <Component :is="sectionTag" class="vp-sidebar-item" :class="classes">
+  <Component :is="sectionTag" class="vp-sidebar-item sidebar-item" :class="classes">
     <div
       v-if="item.text"
       class="item"