fix(theme-default): sidebar begining top items was unchanged after pa…

…ge switch (#768)
web-infra-dev · Mar 14, 2024 · 79a4142 · 79a4142
1 parent 4bcd0a1
commit 79a4142
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/.changeset/curly-seahorses-try.md b/.changeset/curly-seahorses-try.md
@@ -0,0 +1,5 @@
+---
+"@rspress/theme-default": patch
+---
+
+fix sidebar begining top items was unchanged after page switch
diff --git a/packages/theme-default/src/components/Sidebar/index.tsx b/packages/theme-default/src/components/Sidebar/index.tsx
@@ -16,13 +16,25 @@ import { SidebarDivider } from './SidebarDivider';
 import { UISwitchResult } from '#theme/logic/useUISwitch';
 import { SidebarSectionHeader } from './SidebarSectionHeader';
 
-const isSidebarDivider = (item: NormalizedSidebarGroup | ISidebarItem | ISidebarDivider | ISidebarSectionHeader): item is ISidebarDivider => {
+const isSidebarDivider = (
+  item:
+    | NormalizedSidebarGroup
+    | ISidebarItem
+    | ISidebarDivider
+    | ISidebarSectionHeader,
+): item is ISidebarDivider => {
   return 'dividerType' in item;
-}
+};
 
-const isSidebarSectionHeader = (item: NormalizedSidebarGroup | ISidebarItem | ISidebarDivider | ISidebarSectionHeader): item is ISidebarSectionHeader => {
+const isSidebarSectionHeader = (
+  item:
+    | NormalizedSidebarGroup
+    | ISidebarItem
+    | ISidebarDivider
+    | ISidebarSectionHeader,
+): item is ISidebarSectionHeader => {
   return 'sectionHeaderText' in item;
-}
+};
 
 export interface SidebarItemProps {
   id: string;
@@ -131,7 +143,14 @@ export function SideBar(props: Props) {
       route.preload();
     }
   };
-  const renderItem = (item: NormalizedSidebarGroup | ISidebarItem | ISidebarDivider | ISidebarSectionHeader, index: number) => {
+  const renderItem = (
+    item:
+      | NormalizedSidebarGroup
+      | ISidebarItem
+      | ISidebarDivider
+      | ISidebarSectionHeader,
+    index: number,
+  ) => {
     if (isSidebarDivider(item)) {
       return (
         <SidebarDivider
@@ -151,20 +170,21 @@ export function SideBar(props: Props) {
         />
       );
     }
+    const itemId = getSideBarItemKey(item, [index]);
 
     return (
       <SidebarItem
-        id={String(index)}
+        id={itemId}
         item={item}
         depth={0}
         activeMatcher={activeMatcher}
-        key={index}
+        key={itemId}
         collapsed={(item as NormalizedSidebarGroup).collapsed ?? true}
         setSidebarData={setSidebarData}
         preloadLink={preloadLink}
       />
     );
-  }
+  };
   return (
     <aside
       className={`${styles.sidebar} rspress-sidebar ${
@@ -196,3 +216,14 @@ export function SideBar(props: Props) {
     </aside>
   );
 }
+
+function getSideBarItemKey(item: NormalizedSidebarGroup | ISidebarItem, additionalParts?: any[]) {
+  const parts: (PropertyKey | null | undefined)[] = [
+    item._fileKey,
+    item.link,
+    item.text,
+    'items' in item ? item.items.length : -1,
+    ...additionalParts
+  ];
+  return parts.join('|');
+}