docs: redesign sidebar (#8408)

* initial changes

* redesign the sidebar + nav drawer

* changes to sidebar items

* finish up sidebar redesign

* support new sidebar in resources

* general fixes

* integrate in ui

* support api reference

* refactor

* integrate in user guide

* docs: fix build errors

* fix user guide build

* more refactoring

* added banner

* added bottom logo + icon

* fix up sidebar

* fix up paddings

* fix shadow bottom

* docs: add table of content (#8445)

* add toc types

* implement toc functionality

* finished toc redesign

* redesigned table of content

* mobile fixes

* truncate text in toc

* mobile fixes

* merge fixes

* implement redesign

* add hide sidebar

* add menu action item

* finish up hide sidebar design

* implement redesign in resources

* integrate in api reference

* integrate changes in ui

* fixes to api reference scrolling

* fix build error

* fix build errors

* fixes

* fixes to sidebar

* general fixes

* fix active category not closing

* fix long titles

www/apps/resources/app/layout.tsx

@@ -1,10 +1,8 @@
 import type { Metadata } from "next"
 import { Inter, Roboto_Mono } from "next/font/google"
-
-import Navbar from "@/components/Navbar"
 import Providers from "@/providers"
 import "./globals.css"
-import { Bannerv2, Breadcrumbs, TightLayout } from "docs-ui"
+import { Breadcrumbs, TightLayout } from "docs-ui"
 import { config } from "@/config"
 import clsx from "clsx"
 import { Feedback } from "@/components/Feedback"
@@ -41,14 +39,11 @@ export default function RootLayout({
   return (
     <TightLayout
       ProvidersComponent={Providers}
-      NavbarComponent={Navbar}
       sidebarProps={{
         expandItems: true,
-        banner: <Bannerv2 />,
       }}
       bodyClassName={clsx(inter.variable, robotoMono.variable)}
     >
-      <Breadcrumbs />
       {children}
       <Feedback className="my-2" />
       <EditButton />

www/apps/resources/app/medusa-workflows-reference/page.mdx

@@ -10,4 +10,4 @@ This section of the documentation provides a reference to the workflows created
 
 You can use these workflows in your customizations as well. They're available in the `@medusajs/core-flows` package.
 
-<ChildDocs childLevel={2} />
+<ChildDocs childLevel={2} hideItems={["Overview"]} />

www/apps/resources/components/Navbar/index.tsx

@@ -1,38 +0,0 @@
-"use client"
-
-import { Navbar as UiNavbar, getNavbarItems } from "docs-ui"
-import { useSidebar } from "docs-ui"
-import { basePathUrl } from "../../utils/base-path-url"
-import { useMemo } from "react"
-import { config } from "../../config"
-
-const Navbar = () => {
-  const { setMobileSidebarOpen, mobileSidebarOpen } = useSidebar()
-  const navbarItems = useMemo(
-    () =>
-      getNavbarItems({
-        basePath: config.baseUrl,
-        activePath: basePathUrl(""),
-        version: "v2",
-      }),
-    []
-  )
-
-  return (
-    <UiNavbar
-      logo={{
-        light: basePathUrl("/images/logo-icon.png"),
-        dark: basePathUrl("/images/logo-icon-dark.png"),
-      }}
-      items={navbarItems}
-      mobileMenuButton={{
-        setMobileSidebarOpen,
-        mobileSidebarOpen,
-      }}
-      isLoading={false}
-      showSearchOpener
-    />
-  )
-}
-
-export default Navbar

www/apps/resources/config/index.ts

@@ -1,4 +1,4 @@
-import { DocsConfig } from "types"
+import { DocsConfig, SidebarItem } from "types"
 import { getMobileSidebarItems } from "docs-ui"
 import { generatedSidebar } from "../generated/sidebar.mjs"
 
@@ -9,8 +9,7 @@ export const config: DocsConfig = {
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   sidebar: {
-    top: generatedSidebar,
-    bottom: [],
+    default: generatedSidebar as SidebarItem[],
     mobile: getMobileSidebarItems({
       baseUrl,
       version: "v2",

www/apps/resources/providers/index.tsx

@@ -16,6 +16,7 @@ import {
 import SidebarProvider from "./sidebar"
 import SearchProvider from "./search"
 import { config } from "../config"
+import { MainNavProvider } from "./main-nav"
 
 type ProvidersProps = {
   children?: React.ReactNode
@@ -35,16 +36,18 @@ const Providers = ({ children }: ProvidersProps) => {
                   <ScrollControllerProvider scrollableSelector="#main">
                     <SidebarProvider>
                       <PaginationProvider>
-                        <SearchProvider>
-                          <HooksLoader
-                            options={{
-                              pageScrollManager: true,
-                              currentLearningPath: true,
-                            }}
-                          >
-                            {children}
-                          </HooksLoader>
-                        </SearchProvider>
+                        <MainNavProvider>
+                          <SearchProvider>
+                            <HooksLoader
+                              options={{
+                                pageScrollManager: true,
+                                currentLearningPath: true,
+                              }}
+                            >
+                              {children}
+                            </HooksLoader>
+                          </SearchProvider>
+                        </MainNavProvider>
                       </PaginationProvider>
                     </SidebarProvider>
                   </ScrollControllerProvider>

www/apps/resources/providers/main-nav.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import {
+  formatReportLink,
+  getNavDropdownItems,
+  MainNavProvider as UiMainNavProvider,
+  useIsBrowser,
+} from "docs-ui"
+import { useMemo } from "react"
+import { config } from "../config"
+import { basePathUrl } from "../utils/base-path-url"
+
+type MainNavProviderProps = {
+  children?: React.ReactNode
+}
+
+export const MainNavProvider = ({ children }: MainNavProviderProps) => {
+  const isBrowser = useIsBrowser()
+  const navigationDropdownItems = useMemo(
+    () =>
+      getNavDropdownItems({
+        basePath: config.baseUrl,
+        activePath: basePathUrl(),
+        version: "v2",
+      }),
+    []
+  )
+
+  const reportLink = useMemo(
+    () =>
+      formatReportLink(
+        config.titleSuffix || "",
+        isBrowser ? document.title : ""
+      ),
+    [isBrowser]
+  )
+
+  return (
+    <UiMainNavProvider
+      navItems={navigationDropdownItems}
+      reportIssueLink={reportLink}
+    >
+      {children}
+    </UiMainNavProvider>
+  )
+}

www/apps/resources/providers/sidebar.tsx

@@ -20,7 +20,6 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
       initialItems={config.sidebar}
       staticSidebarItems={true}
       disableActiveTransition={true}
-      noTitleStyling={true}
     >
       {children}
     </UiSidebarProvider>

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

@@ -1,4 +1,4 @@
-/** @type {Partial<import("../types").SidebarItemType>} */
+/** @type {Partial<import("../types").RawSidebarItem>} */
 const commonOptions = {
   loaded: true,
   isPathHref: true,
@@ -6,13 +6,19 @@ const commonOptions = {
 
 /**
  *
- * @param {import("types").SidebarItemType[]} sidebar
- * @returns {import("types").SidebarItemType[]}
+ * @param {import("types").RawSidebarItem[]} sidebar
+ * @returns {import("types").RawSidebarItem[]}
  */
 export function sidebarAttachHrefCommonOptions(sidebar) {
-  return sidebar.map((item) => ({
-    ...commonOptions,
-    ...item,
-    children: sidebarAttachHrefCommonOptions(item.children || []),
-  }))
+  return sidebar.map((item) => {
+    if (item.type === "separator") {
+      return item
+    }
+
+    return {
+      ...commonOptions,
+      ...item,
+      children: sidebarAttachHrefCommonOptions(item.children || []),
+    }
+  })
 }