components/Layouts/BlogLayout.tsx

import { Box } from "@mui/material";
import { Fragment, PropsWithChildren } from "react";
import TableOfContents from "../MDX/TableOfContents";

export default function BlogLayout({ children }: PropsWithChildren) {
    return (
        <div className="grid lg:grid-cols-[13fr_4fr] md:gap-[50px] mb-10 relative">
            <div className="lg:px-[50px] xl:px-[100px]">
                <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>

            <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	627	import { Box } from "@mui/material";
2			import { Fragment, PropsWithChildren } from "react";
3			import TableOfContents from "../MDX/TableOfContents";
4
5			export default function BlogLayout({ children }: PropsWithChildren) {
6			return (
7			<div className="grid lg:grid-cols-[13fr_4fr] md:gap-[50px] mb-10 relative">
8			<div className="lg:px-[50px] xl:px-[100px]">
9			<article
10			id="article"
11			className="prose prose-neutral prose-invert prose-code:before:hidden prose-code:after:hidden mt-8 p-3 text-wrap max-w-[100vw] relative"
12			>
13			{children}
14			</article>
15			<br />
16			</div>
17
18			<Box
19			className="hidden lg:block mr-5 max-h-[calc(100vh-4rem)] overflow-y-scroll pb-8 relative"
20			sx={{
21			scrollbarWidth: 0,
22			"::-webkit-scrollbar": {
23			display: "none",
24			},
25			}}
26			>
27			<div className="fixed">
28			<TableOfContents as={Fragment} />
29			</div>
30			</Box>
31			</div>
32			);
33			}