misc: better toc layout

Author: duanwilliam

website/src/layout/components/TocContainer/styles.module.scss

@@ -20,17 +20,13 @@ $toc-width: toc.$desktop-toc-width;
     top: calc(#{$navbar-height} + #{$top});
     max-height: calc(100vh - #{$navbar-height} - #{$top} - #{$margin-bottom});
 
-    margin: $top 1rem $margin-bottom auto;
+    margin: $top auto $margin-bottom 0;
+    padding-left: 1rem;
     border-left: 1px solid #dddddd;
 
     flex-direction: column;
 
     overflow-y: auto;
     @include mixins.scrollbar(4px);
   }
-
-  .toc {
-    margin-left: 2rem;
-    flex-grow: 1;
-  }
 }

website/src/layout/components/TocContainer/styles.module.scss.d.ts

@@ -13,7 +13,6 @@ declare namespace StylesModuleScssNamespace {
     navItem: string;
     navbar: string;
     right: string;
-    toc: string;
     tocContainer: string;
   }
 }

website/src/layout/pages/DocPage/index.tsx

@@ -13,8 +13,6 @@ import Sidebar from "@/components/Sidebar";
 import TocDesktop from "@/components/Toc/Desktop";
 import components from "@/mdx/components";
 
-import { toc as tocClassName } from "@/layout/components/TocContainer/styles.module.scss";
-
 import type { DocPageProps } from "@/layout/pages/types";
 
 export default function DocPage ({ breadcrumb, sidebar, code  }: DocPageProps) {
@@ -37,7 +35,7 @@ export default function DocPage ({ breadcrumb, sidebar, code  }: DocPageProps) {
             </MarkdownWrapper>
           </ContentContainer>
           <TocContainer>
-            <TocDesktop toc={toc} className={tocClassName} />
+            <TocDesktop toc={toc} />
           </TocContainer>
         </ContentWrapper>
       </MainWrapper>