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/components/Icons/NavigationDropdown/Modules/index.tsx

@@ -0,0 +1,33 @@
+import { IconProps } from "@medusajs/icons/dist/types"
+import React from "react"
+
+export const NavigationDropdownModulesIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="20" height="20" className="fill-medusa-tag-red-icon" />
+      <g clipPath="url(#clip0_10557_13175)">
+        <path
+          d="M14.6448 9.33333C14.8281 9.42539 15.0453 9.41516 15.2192 9.30815C15.3931 9.20034 15.4993 9.0107 15.4993 8.80611V7.43379C15.4993 6.24008 14.5291 5.26985 13.3354 5.26985H11.9387C11.9466 5.20454 11.9584 5.1408 11.9584 5.07313C11.9584 4.2052 11.2525 3.49936 10.3846 3.49936C9.51666 3.49936 8.81082 4.2052 8.81082 5.07313C8.81082 5.1408 8.82263 5.20454 8.8305 5.26985H7.43378C6.24007 5.26985 5.26984 6.24008 5.26984 7.43379V8.83051C5.20453 8.82185 5.14079 8.81084 5.07312 8.81084C4.20519 8.81084 3.49935 9.51667 3.49935 10.3846C3.49935 11.2525 4.20519 11.9584 5.07312 11.9584C5.14079 11.9584 5.20453 11.9466 5.26984 11.9387V13.3354C5.26984 14.5291 6.24007 15.4994 7.43378 15.4994H8.8061C9.01069 15.4994 9.20033 15.3931 9.30814 15.22C9.41515 15.0461 9.42538 14.8281 9.3341 14.6456C9.24833 14.4733 9.20427 14.2978 9.20427 14.1223C9.20427 13.4716 9.73384 12.942 10.3846 12.942C11.0353 12.942 11.5649 13.4716 11.5649 14.1223C11.5649 14.2962 11.5209 14.4725 11.4343 14.6464C11.343 14.8289 11.3533 15.0461 11.4611 15.22C11.5689 15.3939 11.7585 15.4994 11.9631 15.4994H13.3354C14.5291 15.4994 15.4993 14.5291 15.4993 13.3354V11.9631C15.4993 11.7585 15.3931 11.5689 15.2192 11.4611C15.0453 11.3533 14.8273 11.343 14.6448 11.4359C13.8367 11.8411 12.942 11.2116 12.942 10.3854C12.942 9.55916 13.8343 8.92965 14.6448 9.3349V9.33333Z"
+          className="fill-medusa-fg-on-color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10557_13175">
+          <rect
+            width="12"
+            height="12"
+            className="fill-medusa-fg-on-color"
+            transform="translate(3.5 3.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx

@@ -1,13 +1,17 @@
 "use client"
 
 import React, { useMemo } from "react"
-import { Button, CurrentItemsState, useSidebar } from "../../.."
+import { Button, CurrentItemsState, useMainNav, useSidebar } from "../../.."
 import clsx from "clsx"
 import Link from "next/link"
 import { SidebarItemLink } from "types"
 
 export const MainNavBreadcrumbs = () => {
   const { currentItems, getActiveItem } = useSidebar()
+  const {
+    activeItem: mainNavActiveItem,
+    breadcrumbOptions: { showCategories },
+  } = useMainNav()
 
   const getLinkPath = (item?: SidebarItemLink): string | undefined => {
     if (!item) {
@@ -27,14 +31,26 @@ export const MainNavBreadcrumbs = () => {
     const parentPath =
       item.parentItem?.type === "link"
         ? getLinkPath(item.parentItem)
+        : (item.parentItem?.type === "category" && showCategories) ||
+          item.parentItem?.type === "sub-category"
+        ? "#"
         : undefined
     const firstItemPath =
-      item.default[0].type === "link" ? getLinkPath(item.default[0]) : undefined
+      item.default[0].type === "link"
+        ? getLinkPath(item.default[0])
+        : (item.default[0].type === "category" && showCategories) ||
+          item.default[0].type === "sub-category"
+        ? "#"
+        : undefined
 
-    tempBreadcrumbItems.set(
-      parentPath || firstItemPath || "/",
-      item.parentItem?.childSidebarTitle || item.parentItem?.title || ""
-    )
+    const breadcrumbPath = parentPath || firstItemPath || "/"
+
+    if (!mainNavActiveItem?.path.endsWith(breadcrumbPath)) {
+      tempBreadcrumbItems.set(
+        breadcrumbPath,
+        item.parentItem?.childSidebarTitle || item.parentItem?.title || ""
+      )
+    }
 
     return tempBreadcrumbItems
   }
@@ -48,10 +64,21 @@ export const MainNavBreadcrumbs = () => {
     }
 
     const activeItem = getActiveItem()
-    if (activeItem) {
+    if (activeItem && !mainNavActiveItem?.path.endsWith(activeItem.path)) {
+      if (
+        activeItem.parentItem &&
+        (activeItem.parentItem.type !== "category" || showCategories)
+      ) {
+        tempBreadcrumbItems.set(
+          activeItem.parentItem.type === "link"
+            ? getLinkPath(activeItem.parentItem) || "#"
+            : "#",
+          activeItem.parentItem.title || ""
+        )
+      }
       tempBreadcrumbItems.set(
         getLinkPath(activeItem) || "/",
-        activeItem?.title || ""
+        activeItem.title || ""
       )
     }
 
@@ -70,9 +97,17 @@ export const MainNavBreadcrumbs = () => {
           <span>/</span>
           <Button
             variant="transparent-clear"
-            className="px-docs_0.5 py-docs_0.25"
+            className={clsx(
+              "px-docs_0.5 py-docs_0.25",
+              link === "#" && "hover:!bg-transparent hover:cursor-default"
+            )}
           >
-            <Link href={link}>{title}</Link>
+            <Link
+              href={link}
+              className={clsx(link === "#" && "hover:cursor-default")}
+            >
+              {title}
+            </Link>
           </Button>
         </React.Fragment>
       ))}

www/packages/docs-ui/src/constants.tsx

@@ -9,6 +9,7 @@ import { NavigationDropdownUiIcon } from "./components/Icons/NavigationDropdown/
 import { NavigationDropdownDocV1Icon } from "./components/Icons/NavigationDropdown/DocV1"
 import { NavigationDropdownUserIcon } from "./components/Icons/NavigationDropdown/User"
 import { NavigationDropdownResourcesIcon } from "./components/Icons/NavigationDropdown/Resources"
+import { NavigationDropdownModulesIcon } from "./components/Icons/NavigationDropdown/Modules"
 
 export const GITHUB_ISSUES_PREFIX = `https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml`
 export const GITHUB_UI_ISSUES_PREFIX = `https://github.com/medusajs/ui/issues/new?labels=documentation`
@@ -20,11 +21,17 @@ export const navDropdownItemsV2: NavigationDropdownItem[] = [
     icon: NavigationDropdownDocIcon,
     title: "Documentation",
   },
+  {
+    type: "link",
+    path: `/v2/resources/commerce-modules`,
+    icon: NavigationDropdownModulesIcon,
+    title: "Commerce Modules",
+  },
   {
     type: "link",
     path: `/v2/resources`,
     icon: NavigationDropdownResourcesIcon,
-    title: "Learning Resources",
+    title: "Development Resources",
   },
   {
     type: "link",

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