git.iko.soy/urbit.org
on master help sign in
Merge pull request #1568 from urbit/mp/sidebar
d7625e0matildepark
components/TableOfContents.js+14−3
compare with master
unifiedsplit
@@ -1,4 +1,5 @@
1import { useState, useEffect, useRef } from "react";
1import { useState, useEffect, useRef } from "react";
2+import classNames from "classnames";
2
3
3export const TableOfContents = ({ staticPosition, noh3s }) => {
4export const TableOfContents = ({ staticPosition, noh3s }) => {
4 const { nestedHeadings } = useHeadingsData(noh3s);
5 const { nestedHeadings } = useHeadingsData(noh3s);
@@ -12,7 +13,9 @@ export const TableOfContents = ({ staticPosition, noh3s }) => {
12 }
13 }
13 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
14 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
14 >
15 >
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">
15− <Headings headings={nestedHeadings} activeId={activeId} />
17+ <Headings headings={nestedHeadings} activeId={activeId} />
18+ </div>
16 </nav>
19 </nav>
17 );
20 );
18};
21};
@@ -51,11 +54,19 @@ const useHeadingsData = (noh3s) => {
51};
54};
52
55
53const Headings = ({ headings, activeId }) => (
56const Headings = ({ headings, activeId }) => (
54− <ul>
57+ <ul
58+ className={classNames({
59+ hidden: headings.length === 1 && headings?.[0]?.items?.length === 0,
60+ })}
61+ >
55 {headings.map((heading, index) => (
62 {headings.map((heading, index) => (
56 <li key={heading.id}>
63 <li key={heading.id}>
57 <a
64 <a
65+ className={classNames({
66+ "font-bold": index === 0,
58− className={index === 0 ? "font-bold" : "font-medium text-sm"}
67+ "font-medium text-sm": index !== 0,
68+ "text-green-400": heading.id === activeId && index !== 0,
69+ })}
59 href={`#${heading.id}`}
70 href={`#${heading.id}`}
60 >
71 >
61 {heading.title}
72 {heading.title}