docs: redesigned navigation (#9525)

Redesign navigation bar to reflect new design and allow for dropdowns

Closes DX-943

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

@@ -0,0 +1,73 @@
+"use client"
+
+import React from "react"
+import { useColorMode } from "../../../../providers"
+import clsx from "clsx"
+import { EllipseMiniSolid } from "@medusajs/icons"
+
+export const MainNavThemeMenu = () => {
+  const { colorMode, setColorMode } = useColorMode()
+
+  return (
+    <>
+      <div
+        className={clsx(
+          "flex items-center gap-docs_0.5",
+          "py-docs_0.25 px-docs_0.5",
+          "rounded-docs_xs text-compact-x-small-plus",
+          "text-medusa-fg-subtle"
+        )}
+      >
+        Theme
+      </div>
+      <div className="px-docs_0.25">
+        <div
+          className={clsx(
+            "flex items-center gap-docs_0.5",
+            "py-docs_0.25 px-docs_0.5 cursor-pointer",
+            "rounded-docs_xs text-medusa-fg-base",
+            "hover:bg-medusa-bg-component-hover"
+          )}
+          tabIndex={-1}
+          onClick={() => setColorMode("light")}
+        >
+          <EllipseMiniSolid
+            className={clsx(colorMode !== "light" && "invisible")}
+          />
+          <span
+            className={clsx(
+              colorMode !== "light" && "text-compact-small",
+              colorMode === "light" && "text-compact-small-plus"
+            )}
+          >
+            Light
+          </span>
+        </div>
+      </div>
+      <div className="px-docs_0.25">
+        <div
+          className={clsx(
+            "flex items-center gap-docs_0.5",
+            "py-docs_0.25 px-docs_0.5 cursor-pointer",
+            "rounded-docs_xs text-medusa-fg-base",
+            "hover:bg-medusa-bg-component-hover"
+          )}
+          tabIndex={-1}
+          onClick={() => setColorMode("dark")}
+        >
+          <EllipseMiniSolid
+            className={clsx(colorMode !== "dark" && "invisible")}
+          />
+          <span
+            className={clsx(
+              colorMode !== "dark" && "text-compact-small",
+              colorMode === "dark" && "text-compact-small-plus"
+            )}
+          >
+            Dark
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,91 @@
+"use client"
+
+import {
+  BarsThree,
+  QuestionMarkCircle,
+  SidebarLeft,
+  TimelineVertical,
+} from "@medusajs/icons"
+import React, { useRef, useState } from "react"
+import {
+  Button,
+  getOsShortcut,
+  Menu,
+  useClickOutside,
+  useSidebar,
+} from "../../.."
+import clsx from "clsx"
+import { HouseIcon } from "../../Icons/House"
+import { MainNavThemeMenu } from "./ThemeMenu"
+
+export const MainNavDesktopMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { setDesktopSidebarOpen } = useSidebar()
+  const ref = useRef(null)
+
+  useClickOutside({
+    elmRef: ref,
+    onClickOutside: () => setIsOpen(false),
+  })
+
+  return (
+    <div
+      className="relative hidden lg:flex justify-center items-center"
+      ref={ref}
+    >
+      <Button
+        variant="transparent"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="!p-[6.5px]"
+      >
+        <BarsThree className="text-medusa-fg-subtle" />
+      </Button>
+      <Menu
+        className={clsx(
+          "absolute top-[calc(100%+8px)] right-0 min-w-[200px]",
+          !isOpen && "hidden"
+        )}
+        items={[
+          {
+            type: "link",
+            icon: <HouseIcon />,
+            title: "Homepage",
+            link: "https://medusajs.com",
+          },
+          {
+            type: "link",
+            icon: <TimelineVertical />,
+            title: "Changelog",
+            link: "https://medusajs.com/changelog",
+          },
+          {
+            type: "link",
+            icon: <QuestionMarkCircle />,
+            title: "Troubleshooting",
+            link: "https://docs.medusajs.com/v2/resources/troubleshooting",
+          },
+          {
+            type: "divider",
+          },
+          {
+            type: "action",
+            title: "Hide Sidebar",
+            icon: <SidebarLeft />,
+            shortcut: `${getOsShortcut()}\\`,
+            action: () => {
+              setDesktopSidebarOpen((prev) => !prev)
+              setIsOpen(false)
+            },
+          },
+          {
+            type: "divider",
+          },
+          {
+            type: "custom",
+            content: <MainNavThemeMenu />,
+          },
+        ]}
+      />
+    </div>
+  )
+}