docs: support multiple sidebars in a project (#11768)

* changed to new sidebar across projects except resources

* finalize multi sidebar support

* clean up

* remove redundant property

* small changes

* fixes

* generate

* fix error

* fix initial open

www/apps/book/app/learn/layout.tsx

@@ -8,13 +8,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <TightLayout
-      sidebarProps={{
-        expandItems: true,
-      }}
-      ProvidersComponent={Providers}
-      footerComponent={<Footer />}
-    >
+    <TightLayout ProvidersComponent={Providers} footerComponent={<Footer />}>
       {children}
     </TightLayout>
   )

www/apps/book/app/not-found.tsx

@@ -6,13 +6,7 @@ import Footer from "../components/Footer"
 
 const NotFoundPage = () => {
   return (
-    <TightLayout
-      sidebarProps={{
-        expandItems: true,
-      }}
-      footerComponent={<Footer />}
-      ProvidersComponent={Providers}
-    >
+    <TightLayout footerComponent={<Footer />} ProvidersComponent={Providers}>
       {/* @ts-ignore React v19 doesn't recognize MDX import as component */}
       <NotFoundContent />
     </TightLayout>

www/apps/book/config/index.ts

@@ -1,6 +1,6 @@
-import { DocsConfig } from "types"
-import { sidebarConfig } from "./sidebar"
+import { DocsConfig, Sidebar } from "types"
 import { globalConfig } from "docs-ui"
+import { generatedSidebars } from "../generated/sidebar.mjs"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
@@ -9,10 +9,18 @@ export const config: DocsConfig = {
   titleSuffix: "Medusa v2 Documentation",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
-  sidebar: sidebarConfig,
+  sidebars: generatedSidebars as Sidebar.Sidebar[],
   project: {
     title: "Documentation",
     key: "book",
   },
   logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
+  breadcrumbOptions: {
+    startItems: [
+      {
+        title: "Documentation",
+        link: "/",
+      },
+    ],
+  },
 }

www/apps/book/config/sidebar.tsx

@@ -1,8 +0,0 @@
-import type { SidebarConfig } from "@/types"
-import { generatedSidebar } from "../generated/sidebar.mjs"
-import { SidebarItem } from "types"
-
-export const sidebarConfig: SidebarConfig = {
-  default: generatedSidebar as SidebarItem[],
-  mobile: [],
-}

www/apps/book/next.config.mjs

@@ -10,7 +10,7 @@ import {
 } from "remark-rehype-plugins"
 import path from "path"
 import redirects from "./utils/redirects.mjs"
-import { generatedSidebar } from "./generated/sidebar.mjs"
+import { generatedSidebars } from "./generated/sidebar.mjs"
 
 const withMDX = mdx({
   extension: /\.mdx?$/,
@@ -82,7 +82,7 @@ const withMDX = mdx({
       [
         pageNumberRehypePlugin,
         {
-          sidebar: generatedSidebar,
+          sidebar: generatedSidebars[0].items,
         },
       ],
     ],

www/apps/book/providers/sidebar.tsx

@@ -15,13 +15,8 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
 
   return (
     <UiSidebarProvider
-      shouldHandlePathChange={true}
-      shouldHandleHashChange={false}
       scrollableElement={scrollableElement}
-      initialItems={config.sidebar}
-      staticSidebarItems={true}
-      disableActiveTransition={true}
-      projectName="docs"
+      sidebars={config.sidebars}
     >
       {children}
     </UiSidebarProvider>

www/apps/book/scripts/prepare.mjs

@@ -1,6 +1,6 @@
 import "dotenv/config"
 import path from "path"
-import { sidebar } from "../sidebar.mjs"
+import { sidebars } from "../sidebar.mjs"
 import {
   generateEditedDates,
   generateLlmsFull,
@@ -15,7 +15,7 @@ import {
 
 async function main() {
   await generateEditedDates()
-  await generateSidebar(sidebar, {
+  await generateSidebar(sidebars, {
     addNumbering: true,
   })
   const baseUrl =

www/apps/book/types/index.d.ts

@@ -1,8 +0,0 @@
-import { SidebarSectionItems, SidebarItem as SidebarItemType } from "types"
-
-export declare type SidebarItem = SidebarItemType & {
-  isSoon: boolean
-  number?: string
-}
-
-export declare type SidebarConfig = SidebarSectionItems

www/apps/book/utils/sidebar-attach-common-options.mjs

@@ -1,31 +0,0 @@
-/** @type {Partial<import("@/types").SidebarItem[]>} */
-const commonOptions = {
-  loaded: true,
-  isPathHref: true,
-}
-
-/**
- *
- * @param {import("@/types").SidebarItem[]} sidebar
- * @param {boolean} nested
- * @returns {import("@/types").SidebarItem[]}
- */
-export function sidebarAttachHrefCommonOptions(sidebar, nested = false) {
-  return sidebar.map((item) => {
-    if (item.type === "separator") {
-      return item
-    }
-
-    const updatedItem = {
-      ...commonOptions,
-      ...item,
-      children: sidebarAttachHrefCommonOptions(item.children || [], true),
-    }
-
-    if (updatedItem.type !== "category" && !nested) {
-      updatedItem.childrenSameLevel = true
-    }
-
-    return updatedItem
-  })
-}