From 1c6ee0ff8fe38d4f576dfed8b56d7b6019e8cfda Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Fri, 12 Apr 2024 07:53:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=96=B0=E5=A2=9E=20sidebar=20?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Sidebar.vue | 32 ++++++++++++++-----------
 theme/src/client/composables/sidebar.ts |  8 +++++++
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/theme/src/client/components/Sidebar.vue b/theme/src/client/components/Sidebar.vue
index 37dbe1a4..bee593a0 100644
--- a/theme/src/client/components/Sidebar.vue
+++ b/theme/src/client/components/Sidebar.vue
@@ -4,12 +4,13 @@ import { ref, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
 import SidebarItem from './SidebarItem.vue'
+import TransitionFadeSlideY from './TransitionFadeSlideY.vue'
 
 const props = defineProps<{
   open: boolean
 }>()
 
-const { sidebarGroups, hasSidebar } = useSidebar()
+const { sidebarGroups, hasSidebar, sidebarKey } = useSidebar()
 
 // a11y: focus Nav element when menu has opened
 const navEl = ref<HTMLElement | null>(null)
@@ -39,20 +40,23 @@ watch(
     >
       <div class="curtain" />
 
-      <nav
-        id="SidebarNav"
-        class="nav"
-        aria-labelledby="sidebar-aria-label"
-        tabindex="-1"
-      >
-        <span id="sidebar-aria-label" class="visually-hidden">
-          Sidebar Navigation
-        </span>
+      <TransitionFadeSlideY>
+        <nav
+          id="SidebarNav"
+          :key="sidebarKey"
+          class="nav"
+          aria-labelledby="sidebar-aria-label"
+          tabindex="-1"
+        >
+          <span id="sidebar-aria-label" class="visually-hidden">
+            Sidebar Navigation
+          </span>
 
-        <div v-for="item in sidebarGroups" :key="item.text" class="group">
-          <SidebarItem :item="item" :depth="0" />
-        </div>
-      </nav>
+          <div v-for="item in sidebarGroups" :key="item.text" class="group">
+            <SidebarItem :item="item" :depth="0" />
+          </div>
+        </nav>
+      </TransitionFadeSlideY>
     </aside>
   </Transition>
 </template>
diff --git a/theme/src/client/composables/sidebar.ts b/theme/src/client/composables/sidebar.ts
index 7d5f18f8..c6dcf26e 100644
--- a/theme/src/client/composables/sidebar.ts
+++ b/theme/src/client/composables/sidebar.ts
@@ -47,6 +47,13 @@ export function useSidebar() {
 
   const isOpen = ref(false)
 
+  const sidebarKey = computed(() => {
+    const link = Object.keys(notesData.value).find(link =>
+      route.path.startsWith(normalizePath(withBase(link))),
+    )
+    return link
+  })
+
   const sidebar = computed(() => {
     return theme.value.notes ? getSidebarList(route.path, notesData.value) : []
   })
@@ -88,6 +95,7 @@ export function useSidebar() {
     hasAside,
     isSidebarEnabled,
     sidebarGroups,
+    sidebarKey,
     open,
     close,
     toggle,