🐛 fix sidebar collapse state reuse by fiber

Author: StarHeartHunt

packages/theme-nonepress/src/theme/Menu/Category.tsx

@@ -13,7 +13,7 @@ export default function MenuCategory({
   items,
   href,
   collapsed = false,
-  setCollapsed = () => undefined,
+  updateCollapsed = () => undefined,
   collapsible = true,
   className,
   activeClassName,
@@ -31,10 +31,10 @@ export default function MenuCategory({
             collapsible
               ? (e) => {
                   if (href) {
-                    setCollapsed(false);
+                    updateCollapsed(false);
                   } else {
                     e.preventDefault();
-                    setCollapsed(!collapsed);
+                    updateCollapsed();
                   }
                 }
               : undefined
@@ -50,7 +50,7 @@ export default function MenuCategory({
             className="menu-category-button"
             onClick={(e) => {
               e.preventDefault();
-              setCollapsed(!collapsed);
+              updateCollapsed();
             }}
           >
             <IconDropdown

packages/theme-nonepress/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -85,6 +85,9 @@ function DropdownNavbarItemMobile({
   const { collapsed, setCollapsed } = useCollapsible({
     initialState: () => !containsActive,
   });
+  const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
+    setCollapsed(toCollapsed);
+  };
 
   // Expand/collapse if any item active after a navigation
   useEffect(() => {
@@ -102,7 +105,7 @@ function DropdownNavbarItemMobile({
       {...props}
       collapsed={collapsed}
       collapsible
-      setCollapsed={setCollapsed}
+      updateCollapsed={updateCollapsed}
       items={subItems}
     />
   );

packages/theme-nonepress/src/theme/Page/Sidebar/Items/index.tsx

@@ -10,7 +10,7 @@ function SidebarItems({ items, path, level }: Props): JSX.Element {
     <DocSidebarItemsExpandedStateProvider>
       {items.map((item, index) => (
         <SidebarItem
-          key={index}
+          key={`${path}_${index}`}
           index={index}
           level={level}
           item={item}

packages/theme-nonepress/src/theme/Page/SidebarItem/Category/index.tsx

@@ -92,7 +92,7 @@ export default function SidebarItemCategory({
       return isActive ? false : item.collapsed;
     },
   });
-
+  
   const { expandedItem, setExpandedItem } = useDocSidebarItemsExpandedState();
   // Use this instead of `setCollapsed`, because it is also reactive
   const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
@@ -126,7 +126,7 @@ export default function SidebarItemCategory({
       label={label}
       items={subItems}
       collapsed={collapsed}
-      setCollapsed={updateCollapsed}
+      updateCollapsed={updateCollapsed}
       collapsible={collapsible}
       aria-current={isCurrentPage ? "page" : undefined}
       aria-expanded={collapsible ? !collapsed : undefined}

packages/theme-nonepress/src/types.d.ts

@@ -1195,7 +1195,7 @@ declare module "@theme/Menu/Category" {
     readonly items: React.ReactNode;
     readonly collapsed?: boolean;
     readonly collapsible?: boolean;
-    readonly setCollapsed?: (collapsed: boolean) => void;
+    readonly updateCollapsed?: (toCollapsed?: boolean) => void;
     readonly wrapperClassName?: string;
   }