docs: redesigned navigation (#9525)

Redesign navigation bar to reflect new design and allow for dropdowns

Closes DX-943

www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import React, { MouseEvent, useMemo } from "react"
-import clsx from "clsx"
-import { useMobile, useSearch } from "@/providers"
-import { Button, Tooltip } from "@/components"
+import React, { MouseEvent } from "react"
+import { useSearch } from "@/providers"
+import { Button } from "@/components"
 import { MagnifyingGlass } from "@medusajs/icons"
 import { useKeyboardShortcut } from "@/hooks"
 
@@ -14,15 +13,8 @@ export type SearchModalOpenerProps = {
 
 export const SearchModalOpener = ({
   isLoading = false,
-  className,
 }: SearchModalOpenerProps) => {
-  const { isMobile } = useMobile()
   const { setIsOpen } = useSearch()
-  const isApple = useMemo(() => {
-    return typeof navigator !== "undefined"
-      ? navigator.userAgent.toLowerCase().indexOf("mac") !== 0
-      : true
-  }, [])
   useKeyboardShortcut({
     shortcutKeys: ["k"],
     action: () => setIsOpen((prev) => !prev),
@@ -46,29 +38,12 @@ export const SearchModalOpener = ({
   }
 
   return (
-    <>
-      {isMobile && (
-        <Button variant="transparent" onClick={handleOpen}>
-          <MagnifyingGlass className="text-medusa-fg-muted" />
-        </Button>
-      )}
-      {!isMobile && (
-        <Tooltip place="bottom" tooltipChildren="Ask or search">
-          <Button
-            className={clsx(
-              "relative hover:cursor-pointer group",
-              "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
-              "justify-between items-center text-medusa-fg-muted",
-              className
-            )}
-            variant="transparent-clear"
-            onClick={handleOpen}
-          >
-            <MagnifyingGlass />
-            <span>{isApple ? "⌘" : "Ctrl"}K</span>
-          </Button>
-        </Tooltip>
-      )}
-    </>
+    <Button
+      variant="transparent"
+      onClick={handleOpen}
+      className="hidden sm:flex !p-[6.5px]"
+    >
+      <MagnifyingGlass className="text-medusa-fg-subtle" />
+    </Button>
   )
 }