docs: add framework to navbar (#12206)
* support link submenu * updated navbar * small fix
This commit is contained in:
Shahed Nasser
GitHub
@@ -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",
|
||||
"hover:[&_li_div]:!text-medusa-fg-base hover:[&_li_a]:!text-medusa-fg-base"
|
||||
"!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_span]:!text-medusa-fg-base"
|
||||
)}
|
||||
/>
|
||||
<HomepageTopSection />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -16,14 +16,195 @@ export const navDropdownItems: NavigationItem[] = [
|
||||
title: "Product",
|
||||
children: [
|
||||
{
|
||||
type: "link",
|
||||
title: "Commerce Modules",
|
||||
link: "/resources/commerce-modules",
|
||||
type: "sub-menu",
|
||||
title: "Framework",
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -26,6 +26,7 @@ export type MenuItemSubMenu = {
|
||||
type: "sub-menu"
|
||||
items: MenuItem[]
|
||||
title: string
|
||||
link?: string
|
||||
}
|
||||
|
||||
export type MenuItem =
|
||||
|
||||
Reference in New Issue
Block a user