docs: redesign table of content (#12647)

* implement toc

* added to projects

* fixes and adapt for references

* added product frontmatter

* remove action menu from 404 pages

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

@@ -46,7 +46,7 @@ export const MainNavItemDropdown = ({
     return (
       <div
         className={clsx(
-          "cursor-pointer flex gap-docs_0.25 items-center",
+          "cursor-pointer flex gap-docs_0.25 items-center px-docs_0.25 py-docs_0.5",
           isActive && "text-medusa-fg-base",
           !isActive && [
             "text-medusa-fg-muted hover:text-medusa-fg-subtle",

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

@@ -1,63 +1,27 @@
 "use state"
 
-import React, { useEffect, useState } from "react"
-import { useIsBrowser, useSiteConfig } from "../../../providers"
+import React from "react"
+import { useSiteConfig } from "../../../providers"
 import Link from "next/link"
 import { Tooltip } from "../../Tooltip"
 import clsx from "clsx"
 
-const LOCAL_STORAGE_SUFFIX = "last-version"
-
 export const MainNavVersion = () => {
   const {
     config: { version },
   } = useSiteConfig()
-  const [showNewBadge, setShowNewBadge] = useState(false)
-  const { isBrowser } = useIsBrowser()
-
-  useEffect(() => {
-    if (!isBrowser) {
-      return
-    }
-
-    const storedVersion = localStorage.getItem(LOCAL_STORAGE_SUFFIX)
-    if (storedVersion !== version.number) {
-      setShowNewBadge(true)
-    }
-  }, [isBrowser])
-
-  const afterHover = () => {
-    if (!showNewBadge) {
-      return
-    }
-
-    setShowNewBadge(false)
-    localStorage.setItem(LOCAL_STORAGE_SUFFIX, version.number)
-  }
 
   return (
     <Link
       href={version.releaseUrl}
       target="_blank"
-      className={clsx(version.hide && "hidden")}
+      className={clsx(version.hide && "hidden", "px-docs_0.5 py-docs_0.25")}
     >
       <Tooltip html="View the release notes<br/>on GitHub">
-        <span
-          className="relative text-compact-small-plus block"
-          onMouseOut={afterHover}
-        >
+        <span className="relative text-compact-small-plus block">
           <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>
-          )}
         </span>
       </Tooltip>
     </Link>

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

@@ -71,14 +71,6 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
         >
           <div className="lg:flex items-center gap-[6px] text-medusa-fg-subtle hidden">
             <MainNavVersion />
-            <span
-              className={clsx(
-                "text-compact-small",
-                config.version.hide && "hidden"
-              )}
-            >
-              &#183;
-            </span>
             <MainNavItemDropdown
               item={{
                 type: "dropdown",
@@ -113,9 +105,6 @@ 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">
             <AiAssistantTriggerButton />