hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more styling

Browse source
This commit is contained in:
Felix Roos 2022-12-20 22:19:30 +01:00
parent 7a19659c9e
commit f64ef32eaa
3 changed files with 20 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

17
website/src/components/RightSidebar/TableOfContents.tsx
View file

@ -63,19 +63,22 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
const onLinkClick = (e: any) => {
setCurrentID(e.target.getAttribute('href').replace('#', ''));
};
const minDepth = 1;
return (
<>
<ul ref={toc}>
{headings
.filter(({ depth }) => depth > 0 && depth < 4)
.filter(({ depth }) => depth >= minDepth && depth < 4)
.map((heading) => (
<li
className={`border-l-4 border-slate-900 ${['pl-4', 'pl-8', 'pl-12'][heading.depth - 1]} ${
currentID === heading.slug ? 'bg-slate-900' : ''
}`.trim()}
>
<a href={`#${heading.slug}`} onClick={onLinkClick}>
<li className={`w-full`}>
<a
href={`#${heading.slug}`}
onClick={onLinkClick}
className={`py-0.5 block cursor-pointer w-full border-l-4 border-gray-900 hover:bg-gray-900 ${
['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
} ${currentID === heading.slug ? 'bg-gray-900' : ''}`.trim()}
>
{unescape(heading.text)}
</a>
</li>