From 0ba63ac29e2de85474388b69091cecc49e56349b Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 10 Mar 2025 17:19:23 +0200 Subject: [PATCH] change main navbar --- www/apps/resources/generated/files-map.mjs | 4 - .../generated-references-sidebar.mjs | 5 + .../generated/generated-tools-sidebar.mjs | 2 + www/apps/resources/sidebars/references.mjs | 5 + www/apps/resources/sidebars/tools.mjs | 2 + .../MainNav/Items/Dropdown/index.tsx | 39 ++++- .../components/MainNav/Items/Link/index.tsx | 10 +- .../MainNav/MobileMenu/Main/index.tsx | 17 +- .../MainNav/MobileMenu/SubMenu/index.tsx | 37 +++- .../components/MainNav/MobileMenu/index.tsx | 29 +++- .../src/components/Menu/SubMenu/index.tsx | 42 +++++ .../docs-ui/src/components/Menu/index.tsx | 4 + www/packages/docs-ui/src/constants.tsx | 159 ++++++------------ .../docs-ui/src/providers/MainNav/index.tsx | 2 +- .../docs-ui/src/utils/get-navbar-items.ts | 45 +++-- www/packages/types/src/menu.ts | 7 + www/packages/types/src/navigation.ts | 3 +- 17 files changed, 260 insertions(+), 152 deletions(-) create mode 100644 www/packages/docs-ui/src/components/Menu/SubMenu/index.tsx diff --git a/www/apps/resources/generated/files-map.mjs b/www/apps/resources/generated/files-map.mjs index 907d2f32ed..d6bb48e1b1 100644 --- a/www/apps/resources/generated/files-map.mjs +++ b/www/apps/resources/generated/files-map.mjs @@ -883,10 +883,6 @@ export const filesMap = [ "filePath": "/www/apps/resources/app/plugins/guides/wishlist/page.mdx", "pathname": "/plugins/guides/wishlist" }, - { - "filePath": "/www/apps/resources/app/plugins/page.mdx", - "pathname": "/plugins" - }, { "filePath": "/www/apps/resources/app/recipes/b2b/page.mdx", "pathname": "/recipes/b2b" diff --git a/www/apps/resources/generated/generated-references-sidebar.mjs b/www/apps/resources/generated/generated-references-sidebar.mjs index 4a30927015..1764811e9e 100644 --- a/www/apps/resources/generated/generated-references-sidebar.mjs +++ b/www/apps/resources/generated/generated-references-sidebar.mjs @@ -6401,6 +6401,7 @@ const generatedgeneratedReferencesSidebarSidebar = { "type": "category", "title": "Steps", "autogenerate_path": "/references/helper_steps/functions", + "initialOpen": true, "children": [ { "loaded": true, @@ -6502,6 +6503,7 @@ const generatedgeneratedReferencesSidebarSidebar = { "isPathHref": true, "type": "category", "title": "Methods", + "initialOpen": true, "autogenerate_path": "/service-factory-reference/methods", "children": [ { @@ -6583,6 +6585,7 @@ const generatedgeneratedReferencesSidebarSidebar = { "isPathHref": true, "type": "category", "title": "Tips", + "initialOpen": true, "autogenerate_path": "/service-factory-reference/tips", "children": [ { @@ -6622,6 +6625,7 @@ const generatedgeneratedReferencesSidebarSidebar = { "isPathHref": true, "type": "category", "title": "Functions", + "initialOpen": true, "children": [ { "loaded": true, @@ -6668,6 +6672,7 @@ const generatedgeneratedReferencesSidebarSidebar = { "isPathHref": true, "type": "category", "title": "Functions", + "initialOpen": true, "autogenerate_path": "/references/workflows/functions", "children": [ { diff --git a/www/apps/resources/generated/generated-tools-sidebar.mjs b/www/apps/resources/generated/generated-tools-sidebar.mjs index 4fcf3e64a5..fa5922f4ae 100644 --- a/www/apps/resources/generated/generated-tools-sidebar.mjs +++ b/www/apps/resources/generated/generated-tools-sidebar.mjs @@ -33,6 +33,7 @@ const generatedgeneratedToolsSidebarSidebar = { "sidebar_id": "medusa-cli", "title": "Medusa CLI", "childSidebarTitle": "Medusa CLI Reference", + "initialOpen": true, "children": [ { "loaded": true, @@ -756,6 +757,7 @@ const generatedgeneratedToolsSidebarSidebar = { "isPathHref": true, "type": "category", "title": "Payment", + "initialOpen": true, "children": [ { "loaded": true, diff --git a/www/apps/resources/sidebars/references.mjs b/www/apps/resources/sidebars/references.mjs index 88ad188b03..fdc2abbf04 100644 --- a/www/apps/resources/sidebars/references.mjs +++ b/www/apps/resources/sidebars/references.mjs @@ -99,6 +99,7 @@ export const referencesSidebar = [ type: "category", title: "Steps", autogenerate_path: "/references/helper_steps/functions", + initialOpen: true, }, ], }, @@ -120,11 +121,13 @@ export const referencesSidebar = [ { type: "category", title: "Methods", + initialOpen: true, autogenerate_path: "/service-factory-reference/methods", }, { type: "category", title: "Tips", + initialOpen: true, autogenerate_path: "/service-factory-reference/tips", }, ], @@ -146,6 +149,7 @@ export const referencesSidebar = [ { type: "category", title: "Functions", + initialOpen: true, children: [ { type: "link", @@ -179,6 +183,7 @@ export const referencesSidebar = [ { type: "category", title: "Functions", + initialOpen: true, autogenerate_path: "/references/workflows/functions", }, ], diff --git a/www/apps/resources/sidebars/tools.mjs b/www/apps/resources/sidebars/tools.mjs index f6b9d1a807..0feba51f59 100644 --- a/www/apps/resources/sidebars/tools.mjs +++ b/www/apps/resources/sidebars/tools.mjs @@ -22,6 +22,7 @@ export const toolsSidebar = [ sidebar_id: "medusa-cli", title: "Medusa CLI", childSidebarTitle: "Medusa CLI Reference", + initialOpen: true, children: [ { type: "link", @@ -100,6 +101,7 @@ export const toolsSidebar = [ { type: "category", title: "Payment", + initialOpen: true, children: [ { type: "link", diff --git a/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx b/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx index 4961e7398b..04fb8d0ef4 100644 --- a/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx +++ b/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx @@ -5,6 +5,7 @@ import clsx from "clsx" import React, { useRef, useState } from "react" import { NavigationItemDropdown } from "types" import { Menu } from "../../../.." +import { MainNavItemLink } from "../Link" type MainNavItemDropdownProps = { item: NavigationItemDropdown @@ -22,13 +23,26 @@ export const MainNavItemDropdown = ({ const [isOpen, setIsOpen] = useState(false) const ref = useRef(null) - return ( -
setIsOpen(true)} - onMouseLeave={() => setIsOpen(false)} - > + const getItemContent = () => { + if (item.link) { + return ( + + } + /> + ) + } + + return (
+ ) + } + + return ( +
setIsOpen(true)} + onMouseLeave={() => setIsOpen(false)} + > + {getItemContent()}
{ +export const MainNavItemLink = ({ + item, + isActive, + icon, +}: MainNavItemLinkProps) => { return ( {item.title} + {icon} ) } diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx index 49ca53d773..4dc2792119 100644 --- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx +++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx @@ -8,11 +8,11 @@ import clsx from "clsx" import { SelectedMenu } from ".." type MainNavMobileMainMenu = { - setSelectedMenu: (menu: SelectedMenu) => void + setSelectedMenus: React.Dispatch> } export const MainNavMobileMainMenu = ({ - setSelectedMenu, + setSelectedMenus: setSelectedMenu, }: MainNavMobileMainMenu) => { const { navItems } = useMainNav() @@ -34,14 +34,17 @@ export const MainNavMobileMainMenu = ({ return } - setSelectedMenu({ - title: item.title, - menu: item.children, - }) + setSelectedMenu((prev) => [ + ...prev, + { + title: item.title, + menu: item.children, + }, + ]) }} > {item.type === "link" && ( - + {item.title} )} diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx index fad4c39460..150e19b399 100644 --- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx +++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx @@ -3,19 +3,25 @@ import clsx from "clsx" import Link from "next/link" import React, { useMemo } from "react" -import { MenuItem, MenuItemLink } from "types" +import { MenuItem, MenuItemLink, MenuItemSubMenu } from "types" +import { SelectedMenu } from ".." +import { TriangleRightMini } from "@medusajs/icons" type MainNavMobileSubMenuProps = { menu: MenuItem[] title: string + setSelectedMenus: React.Dispatch> } export const MainNavMobileSubMenu = ({ menu, title, + setSelectedMenus, }: MainNavMobileSubMenuProps) => { - const filteredItems: MenuItemLink[] = useMemo(() => { - return menu.filter((item) => item.type === "link") as MenuItemLink[] + const filteredItems: (MenuItemLink | MenuItemSubMenu)[] = useMemo(() => { + return menu.filter( + (item) => item.type === "link" || item.type === "sub-menu" + ) as (MenuItemLink | MenuItemSubMenu)[] }, [menu]) return (
@@ -31,9 +37,28 @@ export const MainNavMobileSubMenu = ({ "flex justify-between gap-docs_1" )} > - - {item.title} - + {item.type === "link" && ( + + {item.title} + + )} + {item.type === "sub-menu" && ( +
+ setSelectedMenus((prev) => [ + ...prev, + { + title: item.title, + menu: item.items, + }, + ]) + } + > + {item.title} + +
+ )} ))} diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx index 01bf65b087..05e88925b0 100644 --- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx +++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx @@ -13,11 +13,11 @@ import { MainNavMobileSubMenu } from "./SubMenu" export type SelectedMenu = { title: string menu: MenuItem[] -} +}[] export const MainNavMobileMenu = () => { const [isOpen, setIsOpen] = useState(false) - const [selectedMenu, setSelectedMenu] = useState() + const [selectedMenus, setSelectedMenus] = useState([]) const ref = useRef(null) return ( @@ -40,7 +40,11 @@ export const MainNavMobileMenu = () => { > { timeout={250} >
- {!selectedMenu && ( - + {selectedMenus.length === 0 && ( + )} - {selectedMenu && ( + {selectedMenus.length > 0 && ( <>
{ "cursor-pointer" )} tabIndex={-1} - onClick={() => setSelectedMenu(undefined)} + onClick={() => + setSelectedMenus((prev) => { + const temp = [...prev] + temp.pop() + return temp + }) + } > Back
- + )}
diff --git a/www/packages/docs-ui/src/components/Menu/SubMenu/index.tsx b/www/packages/docs-ui/src/components/Menu/SubMenu/index.tsx new file mode 100644 index 0000000000..81d4b953b9 --- /dev/null +++ b/www/packages/docs-ui/src/components/Menu/SubMenu/index.tsx @@ -0,0 +1,42 @@ +"use client" + +import React, { useState } from "react" +import { Menu, MenuProps } from ".." +import clsx from "clsx" +import { MenuItemSubMenu } from "types" +import { ChevronRight } from "@medusajs/icons" + +type MenuSubMenuProps = Pick & { + item: MenuItemSubMenu +} + +export const MenuSubMenu = ({ item, itemsOnClick }: MenuSubMenuProps) => { + const [open, setOpen] = useState(false) + return ( +
setOpen(true)} + onMouseLeave={() => setOpen(false)} + > + itemsOnClick?.(item)} + > + {item.title} + + + + + {open && ( +
+ +
+ )} +
+ ) +} diff --git a/www/packages/docs-ui/src/components/Menu/index.tsx b/www/packages/docs-ui/src/components/Menu/index.tsx index d803b8c6f3..097599ba67 100644 --- a/www/packages/docs-ui/src/components/Menu/index.tsx +++ b/www/packages/docs-ui/src/components/Menu/index.tsx @@ -4,6 +4,7 @@ import { MenuItem as MenuItemType } from "types" import { MenuItem } from "./Item" import { MenuDivider } from "./Divider" import { MenuAction } from "./Action" +import { MenuSubMenu } from "./SubMenu" export type MenuProps = { items: MenuItemType[] @@ -30,6 +31,9 @@ export const Menu = ({ items, className, itemsOnClick }: MenuProps) => { )} {item.type === "divider" && } {item.type === "custom" && item.content} + {item.type === "sub-menu" && ( + + )} ))}
diff --git a/www/packages/docs-ui/src/constants.tsx b/www/packages/docs-ui/src/constants.tsx index d3a30d0021..70430b6ca0 100644 --- a/www/packages/docs-ui/src/constants.tsx +++ b/www/packages/docs-ui/src/constants.tsx @@ -7,7 +7,7 @@ export const GITHUB_ISSUES_LINK = export const navDropdownItems: NavigationItem[] = [ { type: "link", - path: `/learn`, + link: `/learn`, title: "Get Started", project: "book", }, @@ -29,52 +29,50 @@ export const navDropdownItems: NavigationItem[] = [ }, { type: "dropdown", - title: "Resources", + title: "Build", children: [ - { - type: "link", - title: "All Guides", - link: "/resources", - useAsFallback: true, - }, - { - type: "link", - title: "Examples", - link: "/resources/examples", - }, { type: "link", title: "Recipes", link: "/resources/recipes", }, { - type: "divider", + type: "link", + title: "How-to & Tutorials", + link: "/resources/how-to-tutorials", }, { type: "link", - title: "Admin Components", - link: "/resources/admin-components", + title: "Integrations", + link: "/resources/integrations", }, { type: "link", - title: "Storefront Development", + title: "Storefront", link: "/resources/storefront-development", }, ], }, { type: "dropdown", - title: "Tools & SDKs", + title: "Tools", + link: "/resources/tools", children: [ { - type: "link", - title: "UI Library", - link: "/ui", - }, - { - type: "link", - title: "Medusa CLI", - link: "/resources/medusa-cli", + type: "sub-menu", + title: "CLI Tools", + items: [ + { + type: "link", + title: "create-medusa-app", + link: "/resources/create-medusa-app", + }, + { + type: "link", + title: "Medusa CLI", + link: "/resources/medusa-cli", + }, + ], }, { type: "link", @@ -88,77 +86,8 @@ export const navDropdownItems: NavigationItem[] = [ }, { type: "link", - title: "create-medusa-app", - link: "/resources/create-medusa-app", - }, - { - type: "divider", - }, - { - type: "link", - title: "Integrations", - link: "/resources/integrations", - }, - ], - }, - { - type: "dropdown", - title: "Framework", - children: [ - { - type: "link", - title: "Modules", - link: "/learn/fundamentals/modules", - }, - { - type: "link", - title: "API Routes", - link: "/learn/fundamentals/api-routes", - }, - { - type: "link", - title: "Workflows", - link: "/learn/fundamentals/workflows", - }, - { - type: "link", - title: "Data Models", - link: "/learn/fundamentals/data-models", - }, - { - type: "link", - title: "Subscribers", - link: "/learn/fundamentals/events-and-subscribers", - }, - { - type: "link", - title: "Scheduled Jobs", - link: "/learn/fundamentals/scheduled-jobs", - }, - { - type: "link", - title: "Loaders", - link: "/learn/fundamentals/modules/loaders", - }, - { - type: "link", - title: "Admin Customizations", - link: "/learn/fundamentals/admin", - }, - { - type: "link", - title: "Plugins", - link: "/learn/fundamentals/plugins", - }, - { - type: "link", - title: "Links", - link: "/learn/fundamentals/module-links", - }, - { - type: "link", - title: "Query", - link: "/learn/fundamentals/module-links/query", + title: "Medusa UI", + link: "/ui", }, ], }, @@ -179,6 +108,16 @@ export const navDropdownItems: NavigationItem[] = [ { type: "divider", }, + { + type: "link", + title: "Admin Injection Zones", + link: "/resources/admin-widget-injection-zones", + }, + { + type: "link", + title: "Container Resources", + link: "/resources/medusa-container-resources", + }, { type: "link", title: "Core Workflows", @@ -189,11 +128,6 @@ export const navDropdownItems: NavigationItem[] = [ title: "Data Model Language", link: "/resources/references/data-model", }, - { - type: "link", - title: "Service Factory", - link: "/resources/service-factory-reference", - }, { type: "link", title: "Events Reference", @@ -201,15 +135,30 @@ export const navDropdownItems: NavigationItem[] = [ }, { type: "link", - title: "Admin Widget Injection Zones", - link: "/resources/admin-widget-injection-zones", + title: "Helper Steps", + link: "/resources/references/helper-steps", + }, + { + type: "link", + title: "Service Factory", + link: "/resources/service-factory-reference", + }, + { + type: "link", + title: "Testing Framework", + link: "/resources/test-tools-reference", + }, + { + type: "link", + title: "Workflows SDK", + link: "/resources/references/workflows", }, ], }, { type: "link", title: "User Guide", - path: "/user-guide", + link: "/user-guide", }, ] diff --git a/www/packages/docs-ui/src/providers/MainNav/index.tsx b/www/packages/docs-ui/src/providers/MainNav/index.tsx index 6df56db5bd..80a46234a8 100644 --- a/www/packages/docs-ui/src/providers/MainNav/index.tsx +++ b/www/packages/docs-ui/src/providers/MainNav/index.tsx @@ -59,7 +59,7 @@ export const MainNavProvider = ({ return false } - const isItemActive = currentUrl.startsWith(item.path) + const isItemActive = currentUrl.startsWith(item.link) if (isItemActive && item.useAsFallback && fallbackIndex === undefined) { fallbackIndex = index diff --git a/www/packages/docs-ui/src/utils/get-navbar-items.ts b/www/packages/docs-ui/src/utils/get-navbar-items.ts index 9caa5b31cc..35bdbdc94e 100644 --- a/www/packages/docs-ui/src/utils/get-navbar-items.ts +++ b/www/packages/docs-ui/src/utils/get-navbar-items.ts @@ -1,4 +1,4 @@ -import { NavigationItem } from "types" +import { MenuItem, NavigationItem } from "types" import { navDropdownItems } from ".." type Options = { @@ -12,20 +12,43 @@ export function getNavDropdownItems({ basePath }: Options): NavigationItem[] { } if (newItem.type === "link") { - newItem.path = `${basePath}${newItem.path}` + newItem.link = `${basePath}${newItem.link}` } else { - newItem.children = newItem.children.map((childItem) => { - if (childItem.type !== "link") { - return childItem - } - - return { - ...childItem, - link: `${basePath}${childItem.link}`, - } + newItem.children = normalizeMenuItems({ + basePath, + items: newItem.children, }) } return newItem }) } + +export function normalizeMenuItems({ + basePath, + items, +}: { + basePath: string + items: MenuItem[] +}): MenuItem[] { + return items.map((item) => { + if (item.type !== "link" && item.type !== "sub-menu") { + return item + } + + if (item.type === "link") { + return { + ...item, + link: `${basePath}${item.link}`, + } + } + + return { + ...item, + items: normalizeMenuItems({ + basePath, + items: item.items, + }), + } + }) +} diff --git a/www/packages/types/src/menu.ts b/www/packages/types/src/menu.ts index b548344889..cc3e56c1f2 100644 --- a/www/packages/types/src/menu.ts +++ b/www/packages/types/src/menu.ts @@ -22,8 +22,15 @@ export type MenuItemCustom = { content: React.ReactNode } +export type MenuItemSubMenu = { + type: "sub-menu" + items: MenuItem[] + title: string +} + export type MenuItem = | MenuItemLink | MenuItemDivider | MenuItemAction | MenuItemCustom + | MenuItemSubMenu diff --git a/www/packages/types/src/navigation.ts b/www/packages/types/src/navigation.ts index 8ac7535e78..3bffa94831 100644 --- a/www/packages/types/src/navigation.ts +++ b/www/packages/types/src/navigation.ts @@ -7,11 +7,12 @@ export type NavigationItemDropdown = { useAsFallback?: boolean })[] project?: string + link?: string } export type NavigationItemLink = { type: "link" - path: string + link: string title: string project?: string useAsFallback?: boolean