Fix TOC

Author: ajay-dhangar

src/theme/BlogLayout/BlogLayout.scss

@@ -3,29 +3,27 @@ import clsx from 'clsx'
 import Layout from '@theme/Layout'
 import BlogSidebar from '@theme/BlogSidebar'
 
-import './BlogLayout.scss' // Import the SCSS file
-
 export default function BlogLayout(props) {
   const { sidebar, toc, children, ...layoutProps } = props
   const hasSidebar = sidebar && sidebar.items.length > 0
 
   return (
     <Layout {...layoutProps}>
-      <div className="blog-layout">
-        <div className="blog-layout__row">
+      <div className='container max-w-7xl px-4 py-4 mx-auto mt-4'>
+        <div className='row'>
           <BlogSidebar sidebar={sidebar} hideOnDesktop />
           <main
-            className={clsx('blog-layout__main', {
-              'blog-layout__main--full': hasSidebar && !toc,
-              'blog-layout__main--with-toc': hasSidebar && toc,
-              'blog-layout__main--no-sidebar': !hasSidebar
+            className={clsx('col', {
+              'col--12': hasSidebar && !toc,
+              'col--9': hasSidebar && toc,
+              'col--9 col--offset-1': !hasSidebar
             })}
           >
             {children}
           </main>
-          {toc && <div className="blog-layout__toc">{toc}</div>}
+          {toc && <div className='col col--3'>{toc}</div>}
         </div>
       </div>
     </Layout>
   )
-}
+}

src/theme/BlogLayout/index.js

@@ -1,7 +1,6 @@
 .blog-banner {
   margin-bottom: 2rem;
   text-align: center;
-//   padding: 0 1rem;
 
   &__image-wrapper {
     position: relative;