docs: change navbar items + breadcrumb improvements (#9209)

- Add a new commerce module navbar item
- Rename Learning Resources to Development Resources (in navbar and across documentation content)
- Improve breadcrumbs to show categories / subcategories

Preview: https://resources-docs-git-docs-navbar-changes-medusajs.vercel.app/v2/resources

www/packages/docs-ui/src/providers/MainNav/index.tsx

@@ -1,13 +1,18 @@
 "use client"
 
 import React, { createContext, useContext, useMemo } from "react"
-import { NavigationDropdownItem } from "types"
+import {
+  BreadcrumbOptions,
+  NavigationDropdownItem,
+  NavigationDropdownItemLink,
+} from "types"
 
 export type MainNavContext = {
   navItems: NavigationDropdownItem[]
-  activeItem?: NavigationDropdownItem
+  activeItem?: NavigationDropdownItemLink
   reportIssueLink: string
   editDate?: string
+  breadcrumbOptions: BreadcrumbOptions
 }
 
 const MainNavContext = createContext<MainNavContext | null>(null)
@@ -16,6 +21,7 @@ export type MainNavProviderProps = {
   navItems: NavigationDropdownItem[]
   reportIssueLink: string
   editDate?: string
+  breadcrumbOptions?: BreadcrumbOptions
   children?: React.ReactNode
 }
 
@@ -24,9 +30,15 @@ export const MainNavProvider = ({
   reportIssueLink,
   children,
   editDate,
+  breadcrumbOptions = {
+    showCategories: true,
+  },
 }: MainNavProviderProps) => {
   const activeItem = useMemo(
-    () => navItems.find((item) => item.type === "link" && item.isActive),
+    () =>
+      navItems.find(
+        (item) => item.type === "link" && item.isActive
+      ) as NavigationDropdownItemLink,
     [navItems]
   )
 
@@ -37,6 +49,7 @@ export const MainNavProvider = ({
         activeItem,
         reportIssueLink,
         editDate,
+        breadcrumbOptions,
       }}
     >
       {children}

www/packages/docs-ui/src/providers/Sidebar/index.tsx

@@ -20,6 +20,7 @@ import {
   SidebarItemLink,
   InteractiveSidebarItem,
   SidebarItemCategory,
+  SidebarItemLinkWithParent,
 } from "types"
 
 export type CurrentItemsState = SidebarSectionItems & {
@@ -34,7 +35,7 @@ export type SidebarContextType = {
   items: SidebarSectionItems
   currentItems: CurrentItemsState | undefined
   activePath: string | null
-  getActiveItem: () => SidebarItemLink | undefined
+  getActiveItem: () => SidebarItemLinkWithParent | undefined
   setActivePath: (path: string | null) => void
   isLinkActive: (item: SidebarItem, checkChildren?: boolean) => boolean
   isChildrenActive: (item: SidebarItemCategory) => boolean
@@ -100,8 +101,8 @@ const findItem = (
   section: SidebarItem[],
   item: Partial<SidebarItem>,
   checkChildren = true
-): SidebarItemLink | undefined => {
-  let foundItem: SidebarItemLink | undefined
+): SidebarItemLinkWithParent | undefined => {
+  let foundItem: SidebarItemLinkWithParent | undefined
   section.some((i) => {
     if (i.type === "separator") {
       return false
@@ -110,6 +111,9 @@ const findItem = (
       foundItem = i
     } else if (checkChildren && i.children) {
       foundItem = findItem(i.children, item)
+      if (foundItem && !foundItem.parentItem) {
+        foundItem.parentItem = i
+      }
     }
 
     return foundItem !== undefined