@@ -1,4 +1,5 @@
11import { useState, useEffect, useRef } from "react";
2+import classNames from "classnames";
23
34export const TableOfContents = ({ staticPosition, noh3s }) => {
45 const { nestedHeadings } = useHeadingsData(noh3s);
@@ -12,7 +13,9 @@ export const TableOfContents = ({ staticPosition, noh3s }) => {
1213 }
1314 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
1415 >
15− <Headings headings={nestedHeadings} activeId={activeId} />
16+ <div className="relative after:fixed after:bg-gradient-to-t after:from-white after:via-white after:bottom-0 after:w-52 after:h-60 after:pointer-events-none">
17+ <Headings headings={nestedHeadings} activeId={activeId} />
18+ </div>
1619 </nav>
1720 );
1821};
@@ -51,11 +54,19 @@ const useHeadingsData = (noh3s) => {
5154};
5255
5356const Headings = ({ headings, activeId }) => (
54− <ul>
57+ <ul
58+ className={classNames({
59+ hidden: headings.length === 1 && headings?.[0]?.items?.length === 0,
60+ })}
61+ >
5562 {headings.map((heading, index) => (
5663 <li key={heading.id}>
5764 <a
58− className={index === 0 ? "font-bold" : "font-medium text-sm"}
65+ className={classNames({
66+ "font-bold": index === 0,
67+ "font-medium text-sm": index !== 0,
68+ "text-green-400": heading.id === activeId && index !== 0,
69+ })}
5970 href={`#${heading.id}`}
6071 >
6172 {heading.title}