docs: redesign pagination (#8614)

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

@@ -4,14 +4,16 @@ import clsx from "clsx"
 import React from "react"
 import { MainNavigationDropdown } from "./NavigationDropdown"
 import { MainNavBreadcrumbs } from "./Breadcrumb"
-import { SearchModalOpener, useMainNav } from "../.."
+import { Button, SearchModalOpener, useMainNav, useSidebar } from "../.."
 import { MainNavColorMode } from "./ColorMode"
 import Link from "next/link"
 import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
+import { SidebarLeftIcon } from "../Icons/SidebarLeft"
 
 export const MainNav = () => {
   const { reportIssueLink } = useMainNav()
+  const { setMobileSidebarOpen } = useSidebar()
   return (
     <div
       className={clsx(
@@ -21,6 +23,13 @@ export const MainNav = () => {
       )}
     >
       <div className="flex items-center gap-docs_0.25">
+        <Button
+          className="lg:hidden"
+          variant="transparent-clear"
+          onClick={() => setMobileSidebarOpen(true)}
+        >
+          <SidebarLeftIcon />
+        </Button>
         <MainNavSidebarOpener />
         <MainNavigationDropdown />
         <MainNavBreadcrumbs />

www/packages/docs-ui/src/components/Pagination/Card/index.tsx

@@ -0,0 +1,57 @@
+import { TriangleLeftMini, TriangleRightMini } from "@medusajs/icons"
+import clsx from "clsx"
+import Link from "next/link"
+import React from "react"
+
+type PaginationCardProps = {
+  type: "previous" | "next"
+  title: string
+  parentTitle?: string
+  link: string
+  className?: string
+}
+
+export const PaginationCard = ({
+  type,
+  title,
+  parentTitle,
+  link,
+  className,
+}: PaginationCardProps) => {
+  return (
+    <div
+      className={clsx(
+        "relative flex flex-1 gap-docs_0.75 items-center",
+        "py-docs_0.5 px-docs_0.75 rounded",
+        "bg-medusa-bg-component hover:bg-medusa-bg-component-hover",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "hover:shadow-elevation-card-hover dark:shadow-elevation-card-hover-dark",
+        className
+      )}
+    >
+      <Link href={link} className="absolute top-0 left-0 w-full h-full" />
+      {type === "previous" && (
+        <TriangleLeftMini className="text-medusa-fg-muted" />
+      )}
+      <div
+        className={clsx(
+          "flex-1",
+          type === "previous" && "text-left",
+          type === "next" && "text-right"
+        )}
+      >
+        {parentTitle && (
+          <span className="block text-compact-small text-medusa-fg-subtle">
+            {parentTitle}
+          </span>
+        )}
+        <span className="block text-compact-small-plus text-medusa-fg-base">
+          {title}
+        </span>
+      </div>
+      {type === "next" && (
+        <TriangleRightMini className="text-medusa-fg-muted" />
+      )}
+    </div>
+  )
+}

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

@@ -2,9 +2,8 @@
 
 import React from "react"
 import { usePagination } from "../../providers"
-import { Card } from "../Card"
-import { ChevronLeft, ChevronRight } from "@medusajs/icons"
 import clsx from "clsx"
+import { PaginationCard } from "./Card"
 
 export const Pagination = () => {
   const { previousPage, nextPage } = usePagination()
@@ -13,27 +12,23 @@ export const Pagination = () => {
     <div
       className={clsx(
         "flex justify-between",
-        "flex-col sm:flex-row gap-docs_1 sm:gap-0"
+        "flex-col sm:flex-row gap-docs_0.75"
       )}
     >
       {previousPage && (
-        <Card
+        <PaginationCard
+          type="previous"
           title={previousPage.title}
-          text={previousPage.parentTitle}
+          parentTitle={previousPage.parentTitle}
-          startIcon={<ChevronLeft />}
+          link={previousPage.link}
-          showLinkIcon={false}
-          href={previousPage.link}
-          className={clsx("ml-0 mr-auto items-center", "w-full sm:max-w-[45%]")}
         />
       )}
       {nextPage && (
-        <Card
+        <PaginationCard
+          type="next"
           title={nextPage.title}
-          text={nextPage.parentTitle}
+          parentTitle={nextPage.parentTitle}
-          endIcon={<ChevronRight />}
+          link={nextPage.link}
-          showLinkIcon={false}
-          href={nextPage.link}
-          className={clsx("mr-0 ml-auto items-center", "w-full sm:max-w-[45%]")}
         />
       )}
     </div>