style: table of contents

safe-global · Dec 11, 2024 · a31e64b · a31e64b
1 parent bcd3a6f
commit a31e64b
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 25 deletions.
diff --git a/src/components/Blog/ContentsTable/index.tsx b/src/components/Blog/ContentsTable/index.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { scrollToElement } from '@/lib/scrollSmooth'
 import { Typography } from '@mui/material'
 import Link from 'next/link'
-import css from '../styles.module.css'
+import css from './styles.module.css'
 
 const ContentsTable = ({ content }: { content: ContentfulDocument }) => {
   const handleContentTableClick = (e: React.MouseEvent<HTMLAnchorElement>, target: string) => {
@@ -26,21 +26,27 @@ const ContentsTable = ({ content }: { content: ContentfulDocument }) => {
   )
 
   return (
-    <ul className={css.contentsTable}>
-      {headings.map((heading) => {
-        const headingKey = kebabCase(heading.id)
+    <div className={css.contentsTable}>
+      <Typography variant="caption" color="text.primary">
+        Table of contents
+      </Typography>
 
-        return (
-          <li key={headingKey}>
-            <Typography>
-              <Link onClick={(e) => handleContentTableClick(e, headingKey)} href={`#${headingKey}`}>
-                {heading.text}
-              </Link>
-            </Typography>
-          </li>
-        )
-      })}
-    </ul>
+      <ol>
+        {headings.map((heading) => {
+          const headingKey = kebabCase(heading.id)
+
+          return (
+            <li key={headingKey}>
+              <Typography>
+                <Link onClick={(e) => handleContentTableClick(e, headingKey)} href={`#${headingKey}`}>
+                  {heading.text}
+                </Link>
+              </Typography>
+            </li>
+          )
+        })}
+      </ol>
+    </div>
   )
 }
 

diff --git a/src/components/Blog/ContentsTable/styles.module.css b/src/components/Blog/ContentsTable/styles.module.css
@@ -0,0 +1,30 @@
+.contentsTable {
+  margin: 0;
+  border: 1px solid var(--mui-palette-border-light);
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.contentsTable ol {
+  list-style-type: none;
+  padding-left: 0px;
+}
+
+.contentsTable li {
+  counter-increment: step-counter;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.contentsTable li::before {
+  content: counter(step-counter) ' ';
+  white-space: pre;
+  color: var(--mui-palette-primary-light);
+}
+
+.contentsTable a:hover {
+  text-decoration: underline;
+  color: var(--mui-palette-primary-main);
+}
diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
@@ -104,7 +104,9 @@ const Sidebar = ({
     <aside className={css.sidebar}>
       <ContentsTable content={content} />
 
-      <SharingLinks title={title} authors={authors} />
+      <div className={css.sidebarLinks}>
+        <SharingLinks title={title} authors={authors} />
+      </div>
 
       {isPressRelease ? (
         <div className={css.questionBox}>

diff --git a/src/components/Blog/styles.module.css b/src/components/Blog/styles.module.css
@@ -61,17 +61,11 @@
   width: 100%;
 }
 
-.contentsTable {
-  margin: 0;
-}
-
-.postBody a,
-.contentsTable a {
+.postBody a {
   color: var(--mui-palette-primary-main);
 }
 
-.postBody a:hover,
-.contentsTable a:hover {
+.postBody a:hover {
   text-decoration: underline;
 }
 
@@ -114,6 +108,10 @@
   color: var(--mui-palette-text-dark);
 }
 
+.sidebarLinks {
+  display: none;
+}
+
 .sharingLinks a {
   color: var(--mui-palette-text-primary);
 }
@@ -129,7 +127,6 @@
   }
 
   .content {
-    border: 1px solid red;
     margin-top: 0px;
     padding: 40px 50px;
   }
@@ -150,4 +147,9 @@
     position: sticky;
     top: calc(var(--header-height) + 24px);
   }
+
+  .sidebarLinks {
+    display: block;
+    margin-top: 32px;
+  }
 }