docs: split commerce modules sidebars (#10705)

www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx

@@ -2,7 +2,7 @@
 
 // @refresh reset
 
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { SidebarItemCategory as SidebarItemCategoryType } from "types"
 import { Loading, SidebarItem, useSidebar } from "../../../.."
 import clsx from "clsx"
@@ -22,13 +22,11 @@ export const SidebarItemCategory = ({
   const [open, setOpen] = useState(
     item.initialOpen !== undefined ? item.initialOpen : expandItems
   )
-  const childrenRef = useRef<HTMLUListElement>(null)
   const {
     isChildrenActive,
     updatePersistedCategoryState,
     getPersistedCategoryState,
     persistState,
-    activePath,
   } = useSidebar()
   const itemShowLoading = useMemo(() => {
     return !item.loaded || (item.showLoadingIfEmpty && !item.children?.length)
@@ -115,26 +113,31 @@ export const SidebarItemCategory = ({
           )}
         </div>
       </div>
-      <ul
-        className={clsx(
-          "ease-ease",
-          "flex flex-col gap-docs_0.125",
-          "z-[1] relative",
-          !open && "overflow-hidden m-0 h-0"
-        )}
-        ref={childrenRef}
-      >
-        {showLoading && (
-          <Loading
-            count={3}
-            className="!mb-0 !px-docs_0.5"
-            barClassName="h-[20px]"
-          />
-        )}
-        {item.children?.map((childItem, index) => (
-          <SidebarItem item={childItem} key={index} expandItems={expandItems} />
-        ))}
-      </ul>
+      {!item.hideChildren && (
+        <ul
+          className={clsx(
+            "ease-ease",
+            "flex flex-col gap-docs_0.125",
+            "z-[1] relative",
+            !open && "overflow-hidden m-0 h-0"
+          )}
+        >
+          {showLoading && (
+            <Loading
+              count={3}
+              className="!mb-0 !px-docs_0.5"
+              barClassName="h-[20px]"
+            />
+          )}
+          {item.children?.map((childItem, index) => (
+            <SidebarItem
+              item={childItem}
+              key={index}
+              expandItems={expandItems}
+            />
+          ))}
+        </ul>
+      )}
     </div>
   )
 }

www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx

@@ -84,7 +84,11 @@ export const SidebarItemLink = ({
   }, [active, isMobile])
 
   const hasChildren = useMemo(() => {
-    return !item.isChildSidebar && (item.children?.length || 0) > 0
+    return (
+      !item.isChildSidebar &&
+      !item.hideChildren &&
+      (item.children?.length || 0) > 0
+    )
   }, [item.children])
 
   const isTitleOneWord = useMemo(

www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx

@@ -87,7 +87,7 @@ export const SidebarItemSubCategory = ({
   }, [active, sidebarRef.current, disableActiveTransition])
 
   const hasChildren = useMemo(() => {
-    return item.children?.length || 0 > 0
+    return !item.hideChildren && (item.children?.length || 0) > 0
   }, [item.children])
 
   const isTitleOneWord = useMemo(