docs: add help dropdown (#11364)

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

@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  BarsThree,
-  Book,
-  QuestionMarkCircle,
-  SidebarLeft,
-  TimelineVertical,
-} from "@medusajs/icons"
+import { BarsThree, Book, SidebarLeft, TimelineVertical } from "@medusajs/icons"
 import React, { useMemo, useRef, useState } from "react"
 import {
   Button,
@@ -51,12 +45,6 @@ export const MainNavDesktopMenu = () => {
         title: "Changelog",
         link: "https://medusajs.com/changelog",
       },
-      {
-        type: "link",
-        icon: <QuestionMarkCircle />,
-        title: "Troubleshooting",
-        link: "https://docs.medusajs.com/resources/troubleshooting",
-      },
     ]
 
     if (isSidebarShown) {

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

@@ -9,18 +9,22 @@ import { Menu } from "../../../.."
 type MainNavItemDropdownProps = {
   item: NavigationItemDropdown
   isActive: boolean
+  className?: string
+  wrapperClassName?: string
 }
 
 export const MainNavItemDropdown = ({
   item,
   isActive,
+  className,
+  wrapperClassName,
 }: MainNavItemDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
   return (
     <div
-      className={clsx("relative")}
+      className={clsx("relative", wrapperClassName)}
       ref={ref}
       onMouseOver={() => setIsOpen(true)}
       onMouseLeave={() => setIsOpen(false)}
@@ -32,7 +36,8 @@ export const MainNavItemDropdown = ({
           !isActive && [
             "text-medusa-fg-muted hover:text-medusa-fg-subtle",
             isOpen && "text-medusa-fg-subtle",
-          ]
+          ],
+          className
         )}
         tabIndex={-1}
       >

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

@@ -5,6 +5,7 @@ import React from "react"
 import {
   BorderedIcon,
   Button,
+  GITHUB_ISSUES_LINK,
   LinkButton,
   SearchModalOpener,
   useLayout,
@@ -20,6 +21,7 @@ import { MainNavMobileMenu } from "./MobileMenu"
 import Link from "next/link"
 import { MainNavVersion } from "./Version"
 import { AiAssistantTriggerButton } from "../AiAssistant/TriggerButton"
+import { MainNavItemDropdown } from "./Items/Dropdown"
 
 type MainNavProps = {
   className?: string
@@ -74,14 +76,40 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
           <div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">
             <MainNavVersion />
             {editDate && <MainNavEditDate date={editDate} />}
-            <LinkButton
-              href={config.reportIssueLink || ""}
-              variant="subtle"
-              target="_blank"
-              className="text-compact-small-plus"
-            >
-              Report Issue
-            </LinkButton>
+            <MainNavItemDropdown
+              item={{
+                type: "dropdown",
+                title: "Help",
+                children: [
+                  {
+                    type: "link",
+                    title: "Troubleshooting",
+                    link: "/resources/troubleshooting",
+                  },
+                  {
+                    type: "link",
+                    title: "Report Issue",
+                    link: GITHUB_ISSUES_LINK,
+                  },
+                  {
+                    type: "link",
+                    title: "Discord Community",
+                    link: "https://discord.gg/medusajs",
+                  },
+                  {
+                    type: "divider",
+                  },
+                  {
+                    type: "link",
+                    title: "Contact Sales",
+                    link: "https://medusajs.com/contact/",
+                  },
+                ],
+              }}
+              isActive={false}
+              className="text-medusa-fg-subtle"
+              wrapperClassName="z-10"
+            />
           </div>
           <div className="flex items-center gap-docs_0.25">
             <AiAssistantTriggerButton />