docs: add framework to navbar (#12206)

* support link submenu

* updated navbar

* small fix

www/apps/book/app/page.tsx

@@ -38,8 +38,8 @@ const Homepage = () => {
             <MainNav
               className="border-b border-medusa-border-base"
               itemsClassName={clsx(
-                "!my-1 [&_li_div]:!text-medusa-fg-subtle [&_li_a]:!text-medusa-fg-subtle",
+                "!my-1 [&_li_div]:!text-medusa-fg-subtle [&_li_a]:!text-medusa-fg-subtle [&_li_span]:!text-medusa-fg-subtle",
-                "hover:[&_li_div]:!text-medusa-fg-base hover:[&_li_a]:!text-medusa-fg-base"
+                "hover:[&_li_div]:!text-medusa-fg-base hover:[&_li_a]:!text-medusa-fg-base hover:[&_li_span]:!text-medusa-fg-base"
               )}
             />
             <HomepageTopSection />

www/packages/docs-ui/src/components/Menu/SubMenu/index.tsx

@@ -5,6 +5,7 @@ import { Menu, MenuProps } from ".."
 import clsx from "clsx"
 import { MenuItemSubMenu } from "types"
 import { ChevronRight } from "@medusajs/icons"
+import Link from "next/link"
 
 type MenuSubMenuProps = Pick<MenuProps, "itemsOnClick"> & {
   item: MenuItemSubMenu
@@ -12,13 +13,16 @@ type MenuSubMenuProps = Pick<MenuProps, "itemsOnClick"> & {
 
 export const MenuSubMenu = ({ item, itemsOnClick }: MenuSubMenuProps) => {
   const [open, setOpen] = useState(false)
+
+  const Component = item.link ? Link : "span"
+
   return (
     <div
       className="px-docs_0.25 relative"
       onMouseOver={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
     >
-      <span
+      <Component
         className={clsx(
           "flex py-docs_0.25 px-docs_0.5",
           "gap-docs_0.5 rounded-docs_xs",
@@ -26,12 +30,13 @@ export const MenuSubMenu = ({ item, itemsOnClick }: MenuSubMenuProps) => {
           "text-medusa-fg-base justify-between"
         )}
         onClick={() => itemsOnClick?.(item)}
+        href={item.link || "#"}
       >
         <span className="text-compact-small">{item.title}</span>
         <span className="text-medusa-fg-subtle mt-[2.5px] block">
           <ChevronRight />
         </span>
-      </span>
+      </Component>
       {open && (
         <div className="absolute top-0 left-[calc(100%-8px)] w-max">
           <Menu itemsOnClick={itemsOnClick} items={item.items} />

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

@@ -16,14 +16,195 @@ export const navDropdownItems: NavigationItem[] = [
     title: "Product",
     children: [
       {
-        type: "link",
+        type: "sub-menu",
-        title: "Commerce Modules",
+        title: "Framework",
-        link: "/resources/commerce-modules",
+        link: "/learn/fundamentals/framework",
+        items: [
+          {
+            type: "link",
+            title: "API Routes",
+            link: "/learn/fundamentals/api-routes",
+          },
+          {
+            type: "link",
+            title: "Data Models",
+            link: "/learn/fundamentals/data-models",
+          },
+          {
+            type: "link",
+            title: "Events and Subscribers",
+            link: "/learn/fundamentals/events-and-subscribers",
+          },
+          {
+            type: "link",
+            title: "Medusa Container",
+            link: "/learn/fundamentals/medusa-container",
+          },
+          {
+            type: "link",
+            title: "Modules",
+            link: "/learn/fundamentals/modules",
+          },
+          {
+            type: "link",
+            title: "Module Links",
+            link: "/learn/fundamentals/module-links",
+          },
+          {
+            type: "link",
+            title: "Plugins",
+            link: "/learn/fundamentals/plugins",
+          },
+          {
+            type: "link",
+            title: "Query",
+            link: "/learn/fundamentals/module-links/query",
+          },
+          {
+            type: "link",
+            title: "Scheduled Jobs",
+            link: "/learn/fundamentals/scheduled-jobs",
+          },
+          {
+            type: "link",
+            title: "Workflows",
+            link: "/learn/fundamentals/workflows",
+          },
+        ],
       },
       {
-        type: "link",
+        type: "sub-menu",
+        title: "Commerce Modules",
+        link: "/resources/commerce-modules",
+        items: [
+          {
+            type: "link",
+            title: "API Key",
+            link: "/resources/commerce-modules/api-key",
+          },
+          {
+            type: "link",
+            title: "Auth",
+            link: "/resources/commerce-modules/auth",
+          },
+          {
+            type: "link",
+            title: "Cart",
+            link: "/resources/commerce-modules/cart",
+          },
+          {
+            type: "link",
+            title: "Currency",
+            link: "/resources/commerce-modules/currency",
+          },
+          {
+            type: "link",
+            title: "Customer",
+            link: "/resources/commerce-modules/customer",
+          },
+          {
+            type: "link",
+            title: "Fulfillment",
+            link: "/resources/commerce-modules/fulfillment",
+          },
+          {
+            type: "link",
+            title: "Inventory",
+            link: "/resources/commerce-modules/inventory",
+          },
+          {
+            type: "link",
+            title: "Order",
+            link: "/resources/commerce-modules/order",
+          },
+          {
+            type: "link",
+            title: "Payment",
+            link: "/resources/commerce-modules/payment",
+          },
+          {
+            type: "link",
+            title: "Pricing",
+            link: "/resources/commerce-modules/pricing",
+          },
+          {
+            type: "link",
+            title: "Product",
+            link: "/resources/commerce-modules/product",
+          },
+          {
+            type: "link",
+            title: "Promotion",
+            link: "/resources/commerce-modules/promotion",
+          },
+          {
+            type: "link",
+            title: "Region",
+            link: "/resources/commerce-modules/region",
+          },
+          {
+            type: "link",
+            title: "Sales Channel",
+            link: "/resources/commerce-modules/sales-channel",
+          },
+          {
+            type: "link",
+            title: "Stock Location",
+            link: "/resources/commerce-modules/stock-location",
+          },
+          {
+            type: "link",
+            title: "Store",
+            link: "/resources/commerce-modules/store",
+          },
+          {
+            type: "link",
+            title: "Tax",
+            link: "/resources/commerce-modules/tax",
+          },
+          {
+            type: "link",
+            title: "User",
+            link: "/resources/commerce-modules/user",
+          },
+        ],
+      },
+      {
+        type: "sub-menu",
         title: "Architectural Modules",
         link: "/resources/architectural-modules",
+        items: [
+          {
+            type: "link",
+            title: "Cache",
+            link: "/resources/architectural-modules/cache",
+          },
+          {
+            type: "link",
+            title: "Event",
+            link: "/resources/architectural-modules/event",
+          },
+          {
+            type: "link",
+            title: "File",
+            link: "/resources/architectural-modules/file",
+          },
+          {
+            type: "link",
+            title: "Locking",
+            link: "/resources/architectural-modules/locking",
+          },
+          {
+            type: "link",
+            title: "Notification",
+            link: "/resources/architectural-modules/notification",
+          },
+          {
+            type: "link",
+            title: "Workflow Engine",
+            link: "/resources/architectural-modules/workflow-engine",
+          },
+        ],
       },
     ],
   },

www/packages/types/src/menu.ts

@@ -26,6 +26,7 @@ export type MenuItemSubMenu = {
   type: "sub-menu"
   items: MenuItem[]
   title: string
+  link?: string
 }
 
 export type MenuItem =