From 9a479f246ed03057324e042a226a4fbfaea4ee34 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Fri, 1 Mar 2024 10:21:15 +0800
Subject: [PATCH 1/2] fix(VPSidebarItem): use depth and index as the key

---
 src/client/theme-default/components/VPSidebarItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index f6c1c316..3f76227f 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -97,8 +97,8 @@ function onCaretClick() {
     <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"
+          v-for="(i, j) in item.items"
+          :key="`${depth}-${j}`"
           :item="i"
           :depth="depth + 1"
         />

From 32f0943f0a5c1c6a5088fcebed7c354b7a1ef415 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Fri, 8 Mar 2024 11:08:21 +0800
Subject: [PATCH 2/2] fix(sidebar): watch item deep

---
 src/client/theme-default/composables/sidebar.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index a5a07a16..4d991f34 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -7,7 +7,6 @@ import {
   ref,
   watch,
   watchEffect,
-  watchPostEffect,
   type ComputedRef,
   type Ref
 } from 'vue'
@@ -176,9 +175,15 @@ export function useSidebarControl(
     collapsed.value = !!(collapsible.value && item.value.collapsed)
   })
 
-  watchPostEffect(() => {
-    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
-  })
+  watch(
+    item,
+    () => {
+      if (isActiveLink.value || hasActiveLink.value) {
+        collapsed.value = false
+      }
+    },
+    { immediate: true, deep: true }
+  )
 
   function toggle() {
     if (collapsible.value) {