code: function Headings({ toc, path }) {
      if (!toc.length) {
        return null
      }
      return (
        <ul>
          {toc.map(function(item, index) {
            const href = `${path}#${item.id}`
  
            return (
              <li key={index}>
                {item.children.length > 0 && (
                  <input
                    id={href}
                    className="nav_toggle"
                    type="checkbox"
                    defaultChecked={false}
                  />
                )}
                <a
                  className={`nav_toggle-label nav_item-name nav_sublink
                    ${item.children.length ? '' : 'nav_childless'}`}
                  href={href}
                >
                  {item.title}
                </a>
                <Headings toc={item.children} path={path} />
              </li>
            )
          })}
        </ul>
      )
    }
docs: To understand how navigation is composed, start from the bottom