components/Layouts/DocsLayout.tsx

import "prism-themes/themes/prism-coldark-dark.css";
import { Fragment, PropsWithChildren } from "react";
import EditButton from "../MDX/EditButton";
import PageInfo from "../MDX/PageInfo";
import TableOfContents from "../MDX/TableOfContents";
import DocsLinkList from "../Navbar/Sidebar";
import Navigator from "../Navigation/Navigator";
import { Box } from "@mui/material";

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