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/layouts/main-content.tsx

@@ -2,22 +2,26 @@
 
 import React, { useEffect } from "react"
 import clsx from "clsx"
-import { MainNav, useIsBrowser, useLayout, useSidebar } from ".."
+import { MainNav, useIsBrowser, useLayout, useSidebar, useSiteConfig } from ".."
+import { ContentMenu } from "../components/ContentMenu"
 
 export type MainContentLayoutProps = {
   mainWrapperClasses?: string
   contentClassName?: string
   children: React.ReactNode
+  showContentMenu?: boolean
 }
 
 export const MainContentLayout = ({
   children,
   mainWrapperClasses,
   contentClassName,
+  showContentMenu = true,
 }: MainContentLayoutProps) => {
   const { isBrowser } = useIsBrowser()
   const { desktopSidebarOpen } = useSidebar()
   const { mainContentRef } = useLayout()
+  const { frontmatter } = useSiteConfig()
 
   useEffect(() => {
     if (!isBrowser) {
@@ -36,7 +40,7 @@ export const MainContentLayout = ({
         "relative max-w-full",
         "h-full flex-1",
         "flex flex-col",
-        "gap-docs_0.5 lg:pt-docs_0.25 lg:mr-docs_0.25 scroll-m-docs_0.25",
+        "gap-docs_0.5 lg:py-docs_0.25 lg:mr-docs_0.25 scroll-m-docs_0.25",
         !desktopSidebarOpen && "lg:ml-docs_0.25",
         mainWrapperClasses
       )}
@@ -47,7 +51,7 @@ export const MainContentLayout = ({
           "flex-col items-center",
           "h-full w-full",
           "overflow-y-scroll overflow-x-hidden",
-          "md:rounded-t-docs_DEFAULT",
+          "md:rounded-docs_DEFAULT",
           "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
           mainWrapperClasses
         )}
@@ -57,14 +61,16 @@ export const MainContentLayout = ({
         <MainNav />
         <div
           className={clsx(
-            "flex justify-center",
             "pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4",
+            showContentMenu &&
+              "grid grid-cols-1 lg:mx-auto lg:grid-cols-[1fr_221px]",
             contentClassName
           )}
           id="content"
         >
-          {children}
+          <div className="flex justify-center">{children}</div>
         </div>
+        {showContentMenu && !frontmatter.hide_content_menu && <ContentMenu />}
       </div>
     </div>
   )

www/packages/docs-ui/src/layouts/root.tsx

@@ -1,13 +1,11 @@
 import React from "react"
 import clsx from "clsx"
 import { RootProviders, Sidebar, SidebarProps } from "@/components"
-import { Toc } from "../components/Toc"
 import { MainContentLayout, MainContentLayoutProps } from "./main-content"
 import { AiAssistantChatWindow } from "../components/AiAssistant/ChatWindow"
 
 export type RootLayoutProps = {
   bodyClassName?: string
-  showToc?: boolean
   sidebarProps?: SidebarProps
   showBreadcrumbs?: boolean
   ProvidersComponent: React.FC<{ children: React.ReactNode }>
@@ -17,7 +15,6 @@ export type RootLayoutProps = {
 export const RootLayout = ({
   bodyClassName,
   sidebarProps,
-  showToc = true,
   ProvidersComponent,
   ...mainProps
 }: RootLayoutProps) => {
@@ -36,7 +33,6 @@ export const RootLayout = ({
           <Sidebar {...sidebarProps} />
           <div className={clsx("relative", "h-screen", "flex")}>
             <MainContentLayout {...mainProps} />
-            {showToc && <Toc />}
             <AiAssistantChatWindow />
           </div>
         </ProvidersComponent>