docs: add prepare script to generate sidebar (#11894)

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

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useMemo, useState } from "react"
 import { Sidebar } from "types"
-import { Loading, SidebarItem, useSidebar } from "../../../.."
+import { Badge, Loading, SidebarItem, useSidebar } from "../../../.."
 import clsx from "clsx"
 import { MinusMini, PlusMini } from "@medusajs/icons"
 
@@ -106,6 +106,9 @@ export const SidebarItemCategory = ({
             {item.title}
           </span>
           {item.additionalElms}
+          {item.badge && (
+            <Badge variant={item.badge.variant}>{item.badge.text}</Badge>
+          )}
           {!item.additionalElms && (
             <>
               {open && <MinusMini />}
@@ -123,13 +126,6 @@ export const SidebarItemCategory = ({
             !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}
@@ -137,6 +133,13 @@ export const SidebarItemCategory = ({
               isParentCategoryOpen={open}
             />
           ))}
+          {showLoading && (
+            <Loading
+              count={3}
+              className="!mb-0 !px-docs_0.5"
+              barClassName="h-[20px]"
+            />
+          )}
         </ul>
       )}
     </div>

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

@@ -5,6 +5,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import { Sidebar } from "types"
 import {
+  Badge,
   checkSidebarItemVisibility,
   SidebarItem,
   useMobile,
@@ -147,6 +148,9 @@ export const SidebarItemLink = ({
             {item.title}
           </span>
           {item.additionalElms}
+          {item.badge && (
+            <Badge variant={item.badge.variant}>{item.badge.text}</Badge>
+          )}
         </Link>
       </span>
       {hasChildren && (

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

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from "react"
 import { Sidebar } from "types"
-import { useSidebar } from "../../../.."
+import { Badge, useSidebar } from "../../../.."
 import clsx from "clsx"
 import Link from "next/link"
 
@@ -56,6 +56,9 @@ export const SidebarItemSidebar = ({
             {item.title}
           </span>
           {item.additionalElms}
+          {item.badge && (
+            <Badge variant={item.badge.variant}>{item.badge.text}</Badge>
+          )}
         </Link>
       </span>
     </li>

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

@@ -4,7 +4,7 @@
 
 import React, { useMemo, useRef } from "react"
 import { Sidebar } from "types"
-import { SidebarItem } from "../../../.."
+import { Badge, SidebarItem } from "../../../.."
 import clsx from "clsx"
 
 export type SidebarItemSubCategoryProps = {
@@ -53,6 +53,9 @@ export const SidebarItemSubCategory = ({
             {item.title}
           </span>
           {item.additionalElms}
+          {item.badge && (
+            <Badge variant={item.badge.variant}>{item.badge.text}</Badge>
+          )}
         </span>
       </span>
       {hasChildren && (