fix progress bar width and sticky table of contents

safe-global · Jan 19, 2024 · a0cebbc · a0cebbc
1 parent 13d4b01
commit a0cebbc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/components/Blog/ContentTable/index.tsx b/src/components/Blog/ContentTable/index.tsx
@@ -25,19 +25,21 @@ const ContentTable = ({ content }: { content: ContentfulDocument }) => {
   )
 
   return (
-    <ul className={css.contentTable}>
-      {headings.map((heading) => {
-        const headingKey = kebabCase(heading.id)
+    <aside className={css.contentTable}>
+      <ul>
+        {headings.map((heading) => {
+          const headingKey = kebabCase(heading.id)
 
-        return (
-          <li key={headingKey}>
-            <a onClick={(e) => handleContentTableClick(e, headingKey)} href={`#${headingKey}`}>
-              {heading.text}
-            </a>
-          </li>
-        )
-      })}
-    </ul>
+          return (
+            <li key={headingKey}>
+              <a onClick={(e) => handleContentTableClick(e, headingKey)} href={`#${headingKey}`}>
+                {heading.text}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </aside>
   )
 }
 

diff --git a/src/components/Blog/ProgressBar/index.tsx b/src/components/Blog/ProgressBar/index.tsx
@@ -7,7 +7,7 @@ const ProgressBar = () => {
 
   return (
     <div className={css.progressBar}>
-      <LinearProgress variant="determinate" color="primary" value={readProgress} />
+      <LinearProgress variant="determinate" color="primary" value={readProgress} style={{ left: '0' }} />
     </div>
   )
 }

diff --git a/src/components/Blog/styles.module.css b/src/components/Blog/styles.module.css
@@ -9,6 +9,7 @@
 .breadcrumbs,
 .breadcrumbs a {
   color: var(--mui-palette-text-primary);
+  margin-bottom: 24px;
 }
 
 .avatarGroup {
@@ -59,6 +60,11 @@
 }
 
 .contentTable {
+  position: sticky;
+  top: calc(var(--header-height) + 24px);
+}
+
+.contentTable ul {
   list-style: none;
 }