docs: redesigned navigation (#9525)

Redesign navigation bar to reflect new design and allow for dropdowns

Closes DX-943

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

@@ -2,13 +2,14 @@
 
 import clsx from "clsx"
 import React from "react"
-import { MenuItemAction } from "types"
+import { MenuItem, MenuItemAction } from "types"
 
 export type MenuActionProps = {
   item: MenuItemAction
+  onClick?: (item: MenuItem) => void
 }
 
-export const MenuAction = ({ item }: MenuActionProps) => {
+export const MenuAction = ({ item, onClick }: MenuActionProps) => {
   return (
     <div className="px-docs_0.25">
       <span
@@ -19,7 +20,10 @@ export const MenuAction = ({ item }: MenuActionProps) => {
           "text-medusa-fg-base cursor-pointer"
         )}
         tabIndex={-1}
-        onClick={item.action}
+        onClick={() => {
+          item.action()
+          onClick?.(item)
+        }}
       >
         <span className="text-medusa-fg-subtle mt-[2.5px] block">
           {item.icon}

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

@@ -3,13 +3,14 @@
 import clsx from "clsx"
 import Link from "next/link"
 import React from "react"
-import { MenuItemLink } from "types"
+import { MenuItem as MenuItemType, MenuItemLink } from "types"
 
 export type MenuItemProps = {
   item: MenuItemLink
+  onClick?: (item: MenuItemType) => void
 }
 
-export const MenuItem = ({ item }: MenuItemProps) => {
+export const MenuItem = ({ item, onClick }: MenuItemProps) => {
   return (
     <div className="px-docs_0.25">
       <Link
@@ -20,10 +21,13 @@ export const MenuItem = ({ item }: MenuItemProps) => {
           "text-medusa-fg-base"
         )}
         href={item.link}
+        onClick={() => onClick?.(item)}
       >
-        <span className="text-medusa-fg-subtle mt-[2.5px] block">
-          {item.icon}
-        </span>
+        {item.icon && (
+          <span className="text-medusa-fg-subtle mt-[2.5px] block">
+            {item.icon}
+          </span>
+        )}
         <span className="text-compact-small">{item.title}</span>
       </Link>
     </div>

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

@@ -8,9 +8,10 @@ import { MenuAction } from "./Action"
 export type MenuProps = {
   items: MenuItemType[]
   className?: string
+  itemsOnClick?: (item: MenuItemType) => void
 }
 
-export const Menu = ({ items, className }: MenuProps) => {
+export const Menu = ({ items, className, itemsOnClick }: MenuProps) => {
   return (
     <div
       className={clsx(
@@ -21,9 +22,14 @@ export const Menu = ({ items, className }: MenuProps) => {
     >
       {items.map((item, index) => (
         <React.Fragment key={index}>
-          {item.type === "link" && <MenuItem item={item} />}
-          {item.type === "action" && <MenuAction item={item} />}
+          {item.type === "link" && (
+            <MenuItem item={item} onClick={itemsOnClick} />
+          )}
+          {item.type === "action" && (
+            <MenuAction item={item} onClick={itemsOnClick} />
+          )}
           {item.type === "divider" && <MenuDivider />}
+          {item.type === "custom" && item.content}
         </React.Fragment>
       ))}
     </div>