docs: move edit date to footer (#11667)

* docs: move edit date to footer

* fix build error

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

@@ -1,30 +0,0 @@
-import React from "react"
-
-const DATE_REGEX = /^[a-zA-Z]+ (?<month>[a-zA-Z]+)/
-
-type MainNavEditDateProps = {
-  date: string
-}
-
-export const MainNavEditDate = ({ date }: MainNavEditDateProps) => {
-  const today = new Date(date)
-  const dateObj = new Date(date)
-  const formattedDate = dateObj.toString()
-  const dateMatch = DATE_REGEX.exec(formattedDate)
-
-  if (!dateMatch?.groups?.month) {
-    return <></>
-  }
-
-  return (
-    <>
-      <span className="text-compact-small-plus">
-        Edited {dateMatch.groups.month} {dateObj.getDate()}
-        {dateObj.getFullYear() !== today.getFullYear()
-          ? `, ${dateObj.getFullYear()}`
-          : ""}
-      </span>
-      <span className="text-compact-small">&#183;</span>
-    </>
-  )
-}

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

@@ -36,35 +36,30 @@ export const MainNavVersion = () => {
   }
 
   return (
-    <>
-      <Link
-        href={version.releaseUrl}
-        target="_blank"
-        className={clsx(version.hide && "hidden")}
-      >
-        <Tooltip html="View the release notes<br/>on GitHub">
-          <span
-            className="relative text-compact-small-plus block"
-            onMouseOut={afterHover}
-          >
-            <span className="flex justify-center items-center">
-              v{version.number}
-            </span>
-            {showNewBadge && (
-              <span
-                className={clsx(
-                  "bg-medusa-tag-blue-icon w-[10px] h-[10px]",
-                  "absolute -top-docs_0.25 -right-docs_0.5",
-                  "animate-pulse rounded-full"
-                )}
-              ></span>
-            )}
+    <Link
+      href={version.releaseUrl}
+      target="_blank"
+      className={clsx(version.hide && "hidden")}
+    >
+      <Tooltip html="View the release notes<br/>on GitHub">
+        <span
+          className="relative text-compact-small-plus block"
+          onMouseOut={afterHover}
+        >
+          <span className="flex justify-center items-center">
+            v{version.number}
           </span>
-        </Tooltip>
-      </Link>
-      <span className={clsx("text-compact-small", version.hide && "hidden")}>
-        &#183;
-      </span>
-    </>
+          {showNewBadge && (
+            <span
+              className={clsx(
+                "bg-medusa-tag-blue-icon w-[10px] h-[10px]",
+                "absolute -top-docs_0.25 -right-docs_0.5",
+                "animate-pulse rounded-full"
+              )}
+            ></span>
+          )}
+        </span>
+      </Tooltip>
+    </Link>
   )
 }

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

@@ -8,11 +8,9 @@ import {
   GITHUB_ISSUES_LINK,
   SearchModalOpener,
   useLayout,
-  useMainNav,
   useSidebar,
   useSiteConfig,
 } from "../.."
-import { MainNavEditDate } from "./EditDate"
 import { MainNavItems } from "./Items"
 import { MainNavDesktopMenu } from "./DesktopMenu"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
@@ -28,7 +26,6 @@ type MainNavProps = {
 }
 
 export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
-  const { editDate } = useMainNav()
   const { setMobileSidebarOpen, isSidebarShown } = useSidebar()
   const { config } = useSiteConfig()
   const { showCollapsedNavbar } = useLayout()
@@ -68,13 +65,20 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
         )}
         <div
           className={clsx(
-            "flex items-center gap-docs_0.75 my-docs_0.75",
+            "flex items-center my-docs_0.75",
             showCollapsedNavbar && "flex-grow justify-between"
           )}
         >
-          <div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">
+          <div className="lg:flex items-center gap-[6px] text-medusa-fg-subtle hidden">
             <MainNavVersion />
-            {editDate && <MainNavEditDate date={editDate} />}
+            <span
+              className={clsx(
+                "text-compact-small",
+                config.version.hide && "hidden"
+              )}
+            >
+              &#183;
+            </span>
             <MainNavItemDropdown
               item={{
                 type: "dropdown",
@@ -109,8 +113,11 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
               className="text-medusa-fg-subtle"
               wrapperClassName="z-10"
             />
+            {!showCollapsedNavbar && (
+              <span className={clsx("text-compact-small")}>&#183;</span>
+            )}
           </div>
-          <div className="flex items-center gap-docs_0.25">
+          <div className="flex items-center">
             <AiAssistantTriggerButton />
             <SearchModalOpener />
             <MainNavDesktopMenu />