docs: add routing page (#9550)

- Add a new homepage to `book` project for the routing page
- Move all main doc pages to be under `/v2/learn` (and added redirects + fixed links across docs)
- Other: add admin components to resources dropdown + fixes to search on mobile.

Closes DX-955

Preview: https://docs-v2-git-docs-router-page-medusajs.vercel.app/v2

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

@@ -6,7 +6,7 @@ import {
   SidebarLeft,
   TimelineVertical,
 } from "@medusajs/icons"
-import React, { useRef, useState } from "react"
+import React, { useMemo, useRef, useState } from "react"
 import {
   Button,
   getOsShortcut,
@@ -17,10 +17,11 @@ import {
 import clsx from "clsx"
 import { HouseIcon } from "../../Icons/House"
 import { MainNavThemeMenu } from "./ThemeMenu"
+import { MenuItem } from "types"
 
 export const MainNavDesktopMenu = () => {
   const [isOpen, setIsOpen] = useState(false)
-  const { setDesktopSidebarOpen } = useSidebar()
+  const { setDesktopSidebarOpen, isSidebarShown } = useSidebar()
   const ref = useRef(null)
 
   useClickOutside({
@@ -28,6 +29,59 @@ export const MainNavDesktopMenu = () => {
     onClickOutside: () => setIsOpen(false),
   })
 
+  const items: MenuItem[] = useMemo(() => {
+    const items: MenuItem[] = [
+      {
+        type: "link",
+        icon: <HouseIcon />,
+        title: "Homepage",
+        link: "https://docs.medusajs.com/v2",
+      },
+      {
+        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",
+      },
+    ]
+
+    if (isSidebarShown) {
+      items.push(
+        {
+          type: "divider",
+        },
+        {
+          type: "action",
+          title: "Hide Sidebar",
+          icon: <SidebarLeft />,
+          shortcut: `${getOsShortcut()}\\`,
+          action: () => {
+            setDesktopSidebarOpen((prev) => !prev)
+            setIsOpen(false)
+          },
+        }
+      )
+    }
+
+    items.push(
+      {
+        type: "divider",
+      },
+      {
+        type: "custom",
+        content: <MainNavThemeMenu />,
+      }
+    )
+
+    return items
+  }, [isSidebarShown])
+
   return (
     <div
       className="relative hidden lg:flex justify-center items-center"
@@ -45,46 +99,7 @@ export const MainNavDesktopMenu = () => {
           "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 />,
-          },
-        ]}
+        items={items}
       />
     </div>
   )

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

@@ -4,7 +4,7 @@ import { TriangleDownMini } from "@medusajs/icons"
 import clsx from "clsx"
 import React, { useRef, useState } from "react"
 import { NavigationItemDropdown } from "types"
-import { Menu, useClickOutside } from "../../../.."
+import { Menu } from "../../../.."
 
 type MainNavItemDropdownProps = {
   item: NavigationItemDropdown
@@ -16,15 +16,15 @@ export const MainNavItemDropdown = ({
   isActive,
 }: MainNavItemDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false)
-  const ref = useRef(null)
-
-  useClickOutside({
-    elmRef: ref,
-    onClickOutside: () => setIsOpen(false),
-  })
+  const ref = useRef<HTMLDivElement>(null)
 
   return (
-    <div className={clsx("relative")} ref={ref}>
+    <div
+      className={clsx("relative")}
+      ref={ref}
+      onMouseOver={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
       <div
         className={clsx(
           "cursor-pointer flex gap-docs_0.25 items-center",
@@ -35,21 +35,19 @@ export const MainNavItemDropdown = ({
           ]
         )}
         tabIndex={-1}
-        onClick={() => setIsOpen((prev) => !prev)}
       >
         <span className="text-compact-small-plus">{item.title}</span>
         <TriangleDownMini
           className={clsx("transition-transform", isOpen && "rotate-180")}
         />
       </div>
-      <Menu
-        className={clsx(
-          "absolute top-[calc(100%+4px)] -left-docs_0.75 min-w-[190px]",
-          !isOpen && "hidden"
-        )}
-        items={item.children}
-        itemsOnClick={() => setIsOpen(false)}
-      />
+      <div className="absolute top-full -left-docs_0.75 pt-docs_0.25">
+        <Menu
+          className={clsx("min-w-[190px]", !isOpen && "hidden")}
+          items={item.children}
+          itemsOnClick={() => setIsOpen(false)}
+        />
+      </div>
     </div>
   )
 }

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

@@ -6,14 +6,19 @@ import clsx from "clsx"
 import { MainNavItemLink } from "./Link"
 import { MainNavItemDropdown } from "./Dropdown"
 
-export const MainNavItems = () => {
+type MainNavItemsProps = {
+  className?: string
+}
+
+export const MainNavItems = ({ className }: MainNavItemsProps) => {
   const { navItems, activeItemIndex } = useMainNav()
 
   return (
     <ul
       className={clsx(
         "hidden lg:flex justify-start gap-docs_1 items-center",
-        "my-docs_0.75"
+        "my-docs_0.75",
+        className
       )}
     >
       {navItems.map((item, index) => {

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

@@ -17,33 +17,41 @@ import { MainNavDesktopMenu } from "./DesktopMenu"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
 import { MainNavMobileMenu } from "./MobileMenu"
 
-export const MainNav = () => {
+type MainNavProps = {
+  className?: string
+  itemsClassName?: string
+}
+
+export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
   const { reportIssueLink, editDate } = useMainNav()
-  const { setMobileSidebarOpen } = useSidebar()
+  const { setMobileSidebarOpen, isSidebarShown } = useSidebar()
 
   return (
     <div
       className={clsx(
         "flex justify-between items-center",
         "px-docs_1 w-full z-20",
-        "sticky top-0 bg-medusa-bg-base"
+        "sticky top-0 bg-medusa-bg-base",
+        className
       )}
     >
       <div className="flex items-center gap-docs_1">
         <div className="flex items-center gap-[10px]">
-          <Button
-            className="lg:hidden my-docs_0.75 !p-[6.5px]"
-            variant="transparent-clear"
-            onClick={() => setMobileSidebarOpen(true)}
-          >
-            <SidebarLeftIcon />
-          </Button>
+          {isSidebarShown && (
+            <Button
+              className="lg:hidden my-docs_0.75 !p-[6.5px]"
+              variant="transparent-clear"
+              onClick={() => setMobileSidebarOpen(true)}
+            >
+              <SidebarLeftIcon />
+            </Button>
+          )}
           <BorderedIcon
             IconComponent={MedusaIcon}
             iconWrapperClassName="my-[14px]"
           />
         </div>
-        <MainNavItems />
+        <MainNavItems className={itemsClassName} />
       </div>
       <div className="flex items-center gap-docs_0.75 my-docs_0.75">
         <div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">