Gatsby Table of contents

post.js

{typeof tableOfContents.items === "undefined" ? null : (
  <Toc>
    <h3 className="uppercase">Table of contents</h3>
    <ContentsList items={tableOfContents.items} />
  </Toc>
)}

toc.js

import styled from "styled-components"
import React from 'react'

export const Toc = styled.nav`
  display: flex;
  flex-direction: column;
  ul {
    list-style-type: none;

    li {
      a {
        color: var(--mode);
        font-size: 1.8rem;
        font-weight: 500;
        &:hover {
          color: var(--link-color);
        }
      }
    }
  }

  li > ul li {
    margin-left: 3rem;
    a {
      font-weight: 400;
      font-size: 1.6rem;
    }
  }

  li.active > a {
    color: #333;
    font-weight: 500;
  }
`

export const ContentsList = ({ items }) => {
  return (
    <ul>
      {items.map(item => {
        return <ContentsItem key={`${item.url}-item`} item={item} />
      })}
    </ul>
  )
}

export const ContentsItem = ({ item }) => (
  <li>
    <a href={item.url}>{item.title}</a>
    {item.items && item.items.length && (
      <ContentsList key={`${item.url}`} items={item.items} />
    )}
  </li>
)