docs: redesign sidebar (#8408)

* initial changes * redesign the sidebar + nav drawer * changes to sidebar items * finish up sidebar redesign * support new sidebar in resources * general fixes * integrate in ui * support api reference * refactor * integrate in user guide * docs: fix build errors * fix user guide build * more refactoring * added banner * added bottom logo + icon * fix up sidebar * fix up paddings * fix shadow bottom * docs: add table of content (#8445) * add toc types * implement toc functionality * finished toc redesign * redesigned table of content * mobile fixes * truncate text in toc * mobile fixes * merge fixes * implement redesign * add hide sidebar * add menu action item * finish up hide sidebar design * implement redesign in resources * integrate in api reference * integrate changes in ui * fixes to api reference scrolling * fix build error * fix build errors * fixes * fixes to sidebar * general fixes * fix active category not closing * fix long titles
2024-08-15 12:13:13 +03:00
parent 4cb28531e5
commit b4f3b8a79d
157 changed files with 5080 additions and 2010 deletions
@@ -0,0 +1,68 @@
+"use client"
+
+import React, { useEffect } from "react"
+import { useSidebar } from "../providers/Sidebar"
+import clsx from "clsx"
+import { Bannerv2, MainNav, useIsBrowser } from ".."
+
+export type MainContentLayoutProps = {
+  mainWrapperClasses?: string
+  showBanner?: boolean
+  children: React.ReactNode
+}
+
+export const MainContentLayout = ({
+  children,
+  mainWrapperClasses,
+  showBanner = true,
+}: MainContentLayoutProps) => {
+  const isBrowser = useIsBrowser()
+  const { desktopSidebarOpen } = useSidebar()
+
+  useEffect(() => {
+    if (!isBrowser) {
+      return
+    }
+    if (desktopSidebarOpen) {
+      document.body.classList.add("lg:grid-cols-[221px_1fr]")
+    } else {
+      document.body.classList.remove("lg:grid-cols-[221px_1fr]")
+    }
+  }, [desktopSidebarOpen, isBrowser])
+
+  return (
+    <div
+      className={clsx(
+        "relative",
+        "h-full flex-1",
+        "flex flex-col",
+        "gap-docs_0.5 lg:pt-docs_0.5 lg:mr-docs_0.25",
+        !desktopSidebarOpen && "lg:ml-docs_0.25",
+        mainWrapperClasses
+      )}
+    >
+      {showBanner && <Bannerv2 />}
+      <div
+        className={clsx(
+          "bg-medusa-bg-base",
+          "flex-col items-center",
+          "h-full w-full",
+          "overflow-y-scroll overflow-x-hidden",
+          "md:rounded shadow-elevation-card-rest",
+          mainWrapperClasses
+        )}
+        id="main"
+      >
+        <MainNav />
+        <div
+          className={clsx(
+            "flex justify-center",
+            "pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4"
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -1,48 +1,45 @@
 import React from "react"
 import clsx from "clsx"
 import { Sidebar, SidebarProps } from "@/components"
+import { MobileNavigation } from "../components/MobileNavigation"
+import { Toc } from "../components/Toc"
+import { MainContentLayout, MainContentLayoutProps } from "./main-content"

 export type RootLayoutProps = {
-  children: React.ReactNode
  ProvidersComponent: React.FC<{ children: React.ReactNode }>
-  NavbarComponent: React.FC
+  showToc?: boolean
  sidebarProps?: SidebarProps
  htmlClassName?: string
  bodyClassName?: string
-  mainWrapperClasses?: string
  showPagination?: boolean
-}
+} & MainContentLayoutProps

 export const RootLayout = ({
  ProvidersComponent,
-  NavbarComponent,
-  children,
  sidebarProps,
  htmlClassName,
  bodyClassName,
-  mainWrapperClasses,
+  showToc = true,
+  ...mainProps
 }: RootLayoutProps) => {
  return (
    <html lang="en" className={clsx("h-full w-full", htmlClassName)}>
      <head />
      <body
        className={clsx(
-          "bg-docs-bg font-base text-medium w-full",
+          "bg-medusa-bg-subtle font-base text-medium w-full",
          "text-medusa-fg-subtle",
          "h-screen overflow-hidden",
+          "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
          bodyClassName
        )}
      >
        <ProvidersComponent>
-          <NavbarComponent />
-          <div
-            className="w-full h-[calc(100%-57px)] overflow-y-scroll overflow-x-hidden"
-            id="main"
-          >
-            <div className={clsx("max-w-xxl w-full", mainWrapperClasses)}>
-              <Sidebar {...sidebarProps} />
-              {children}
-            </div>
+          <MobileNavigation />
+          <Sidebar {...sidebarProps} />
+          <div className={clsx("relative", "h-screen", "flex")}>
+            <MainContentLayout {...mainProps} />
+            {showToc && <Toc />}
          </div>
        </ProvidersComponent>
      </body>
@@ -9,24 +9,17 @@ export const TightLayout = ({
  ...props
 }: RootLayoutProps) => {
  return (
-    <RootLayout
-      {...props}
-      mainWrapperClasses={clsx(
-        props.mainWrapperClasses,
-        "grid grid-cols-1 px-docs_1.5 lg:mx-auto lg:grid-cols-[280px_1fr]"
-      )}
-    >
+    <RootLayout {...props}>
      <div
        className={clsx(
-          "relative flex w-full flex-1 items-start justify-center",
-          "px-docs_1 pb-docs_2 pt-docs_7 md:px-docs_2 lg:px-docs_4 lg:py-docs_7",
-          "mb-docs_4 sm:mb-0"
+          "w-full h-fit",
+          "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
+          "lg:max-w-inner-content-lg xl:max-w-inner-content-xl xxl:max-w-inner-content-xxl",
+          "xxxl:max-w-inner-content-xxxl"
        )}
      >
-        <main className="h-full w-full lg:max-w-[720px] lg:px-px">
-          {children}
-          {showPagination && <Pagination />}
-        </main>
+        {children}
+        {showPagination && <Pagination />}
      </div>
    </RootLayout>
  )
@@ -11,9 +11,9 @@ export const WideLayout = ({
  return (
    <RootLayout
      {...props}
-      mainWrapperClasses={clsx(props.mainWrapperClasses, "mx-auto flex px-1.5")}
+      mainWrapperClasses={clsx(props.mainWrapperClasses, "mx-auto flex")}
    >
-      <main className="lg:w-ref-main relative mt-4 w-full flex-1 lg:mt-7">
+      <main className="lg:max-w-wide-content relative mt-4 w-full flex-1 lg:mt-7">
        {children}
        {showPagination && <Pagination />}
      </main>