components/Layouts/DocsLayout.tsx

import { Box } from "@mui/material";
import { Fragment, PropsWithChildren } from "react";
import PageInfo from "../MDX/PageInfo";
import TableOfContents from "../MDX/TableOfContents";
import DocsLinkList from "../Navbar/Sidebar";
import Navigator from "../Navigation/Navigator";

export default function DocsLayout({ children }: PropsWithChildren) {
    return (
        <div
            className="grid lg:grid-cols-[3fr_10fr_3.5fr] md:gap-[50px] mb-10 relative"
            id="docs_layout_root"
        >
            <DocsLinkList desktopOnly fragment />

            <div className="lg:px-[50px] xl:px-[100px] lg:max-w-[60vw]">
                <article
                    id="article"
                    className="prose prose-neutral prose-invert prose-code:before:hidden prose-code:after:hidden mt-8 p-3 text-wrap max-w-[100vw] relative"
                >
                    {children}
                </article>
                <br />
                <div className="mx-3">
                    <Navigator />
                    <hr className="[border-top:1px_solid_#333] mb-5" />
                    <PageInfo />
                </div>
            </div>

            <Box
                className="hidden lg:block mr-5 max-h-[calc(100vh-4rem)] overflow-y-scroll pb-8 relative"
                sx={{
                    scrollbarWidth: 0,
                    "::-webkit-scrollbar": {
                        display: "none",
                    },
                }}
            >
                <div className="fixed">
                    <TableOfContents as={Fragment} />
                </div>
            </Box>
        </div>
    );
}
1	rakinar2	626	import { Box } from "@mui/material";
2	rakinar2	575	import { Fragment, PropsWithChildren } from "react";
3			import PageInfo from "../MDX/PageInfo";
4			import TableOfContents from "../MDX/TableOfContents";
5			import DocsLinkList from "../Navbar/Sidebar";
6			import Navigator from "../Navigation/Navigator";
7
8			export default function DocsLayout({ children }: PropsWithChildren) {
9			return (
10			<div
11	rakinar2	626	className="grid lg:grid-cols-[3fr_10fr_3.5fr] md:gap-[50px] mb-10 relative"
12	rakinar2	575	id="docs_layout_root"
13			>
14			<DocsLinkList desktopOnly fragment />
15
16			<div className="lg:px-[50px] xl:px-[100px] lg:max-w-[60vw]">
17			<article
18			id="article"
19			className="prose prose-neutral prose-invert prose-code:before:hidden prose-code:after:hidden mt-8 p-3 text-wrap max-w-[100vw] relative"
20			>
21			{children}
22			</article>
23			<br />
24			<div className="mx-3">
25			<Navigator />
26			<hr className="[border-top:1px_solid_#333] mb-5" />
27			<PageInfo />
28			</div>
29			</div>
30
31	rakinar2	626	<Box
32			className="hidden lg:block mr-5 max-h-[calc(100vh-4rem)] overflow-y-scroll pb-8 relative"
33			sx={{
34			scrollbarWidth: 0,
35			"::-webkit-scrollbar": {
36			display: "none",
37			},
38			}}
39			>
40			<div className="fixed">
41			<TableOfContents as={Fragment} />
42			</div>
43	rakinar2	575	</Box>
44			</div>
45			);
46			}