0f6f56e764
- Improve scroll behavior between active sections - Improve lag when clicking on a sidebar item - Refactor internal working of the `SidebarProvider` to find active items faster. - Use Next.js's `useRouter` hook for changing the hash (since they added the option to disable scroll) - Change `isBrowser` from a hook to a provider since it's widely used across applications. - Other general improvements and fixes. Closes DOCS-952
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
"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 max-w-full",
|
|
"h-full flex-1",
|
|
"flex flex-col",
|
|
"gap-docs_0.5 lg:pt-docs_0.25 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-t-docs_DEFAULT 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>
|
|
)
|
|
}
|