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/Sidebar/Item/Link/index.tsx

@@ -2,7 +2,7 @@
 
 // @refresh reset
 
-import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import React, { useEffect, useMemo, useRef } from "react"
 import { SidebarItemLink as SidebarItemlinkType } from "types"
 import {
   checkSidebarItemVisibility,
@@ -34,7 +34,7 @@ export const SidebarItemLink = ({
   const active = useMemo(() => isLinkActive(item, true), [isLinkActive, item])
   const ref = useRef<HTMLLIElement>(null)
 
-  const newTopCalculator = useCallback(() => {
+  const newTopCalculator = useMemo(() => {
     if (!sidebarRef.current || !ref.current) {
       return 0
     }
@@ -45,7 +45,8 @@ export const SidebarItemLink = ({
     return (
       itemBoundingRect.top -
       (sidebarBoundingRect.top + sidebarTopHeight) +
-      sidebarRef.current.scrollTop
+      sidebarRef.current.scrollTop -
+      10 // remove extra margin just in case
     )
   }, [sidebarTopHeight, sidebarRef, ref])
 
@@ -64,7 +65,7 @@ export const SidebarItemLink = ({
         })
       } else {
         sidebarRef.current.scrollTo({
-          top: newTopCalculator(),
+          top: newTopCalculator,
         })
       }
     }

www/packages/docs-ui/src/components/Sidebar/Top/index.tsx

@@ -5,6 +5,7 @@ import { SidebarChild } from "../Child"
 import { InteractiveSidebarItem } from "types"
 import { SidebarTopMobileClose } from "./MobileClose"
 import { DottedSeparator } from "../../.."
+import clsx from "clsx"
 
 export type SidebarTopProps = {
   parentItem?: InteractiveSidebarItem
@@ -13,9 +14,15 @@ export type SidebarTopProps = {
 export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
   function SidebarTop({ parentItem }, ref) {
     return (
-      <div className="pt-docs_0.25">
+      <div
+        className={clsx(
+          "pt-docs_0.25 sticky top-0 z-[5]",
+          "bg-medusa-bg-base lg:bg-medusa-bg-subtle"
+        )}
+        ref={ref}
+      >
         <SidebarTopMobileClose />
-        <div ref={ref}>
+        <div>
           {parentItem && (
             <>
               <SidebarChild item={parentItem} />

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

@@ -3,12 +3,12 @@
 import React, { useMemo, useRef } from "react"
 import { useSidebar } from "@/providers"
 import clsx from "clsx"
-import { DottedSeparator, Loading } from "@/components"
+import { Loading } from "@/components"
 import { SidebarItem } from "./Item"
 import { CSSTransition, SwitchTransition } from "react-transition-group"
 import { SidebarTop, SidebarTopProps } from "./Top"
-import useResizeObserver from "@react-hook/resize-observer"
 import { useClickOutside, useKeyboardShortcut } from "@/hooks"
+import useResizeObserver from "@react-hook/resize-observer"
 
 export type SidebarProps = {
   className?: string
@@ -30,10 +30,9 @@ export const Sidebar = ({
     setMobileSidebarOpen,
     staticSidebarItems,
     sidebarRef,
-    sidebarTopHeight,
-    setSidebarTopHeight,
     desktopSidebarOpen,
     setDesktopSidebarOpen,
+    setSidebarTopHeight,
   } = useSidebar()
   useClickOutside({
     elmRef: sidebarWrapperRef,
@@ -92,11 +91,6 @@ export const Sidebar = ({
         ref={sidebarWrapperRef}
       >
         <ul className={clsx("h-full w-full", "flex flex-col")}>
-          <SidebarTop
-            {...sidebarTopProps}
-            parentItem={sidebarItems.parentItem}
-            ref={sidebarTopRef}
-          />
           <SwitchTransition>
             <CSSTransition
               key={sidebarItems.parentItem?.title || "home"}
@@ -110,14 +104,16 @@ export const Sidebar = ({
               <div
                 className={clsx(
                   "overflow-y-scroll clip",
-                  "py-docs_0.75 flex-1"
+                  "pb-docs_0.75 flex-1 max-h-screen"
                 )}
                 ref={sidebarRef}
-                style={{
-                  maxHeight: `calc(100vh - ${sidebarTopHeight}px)`,
-                }}
                 id="sidebar"
               >
+                <SidebarTop
+                  {...sidebarTopProps}
+                  parentItem={sidebarItems.parentItem}
+                  ref={sidebarTopRef}
+                />
                 {/* MOBILE SIDEBAR - keeping this in case we need it in the future */}
                 {/* <div className={clsx("lg:hidden")}>
                   {!sidebarItems.mobile.length && !staticSidebarItems && (
@@ -134,7 +130,7 @@ export const Sidebar = ({
                   {sidebarItems.mobile.length > 0 && <DottedSeparator />}
                 </div> */}
                 {/* DESKTOP SIDEBAR */}
-                <div className="mt-docs_0.75 lg:mt-0">
+                <div className="pt-docs_0.75">
                   {!sidebarItems.default.length && !staticSidebarItems && (
                     <Loading className="px-0" />
                   )}