packages/website/builder/pages/docs/nav.js
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>
    )
  }
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>
    )
  }
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 = { ` ${ item . children . length ? '' : 'nav_childless' } ` } href = { href } > { item . title } < / a > < Headings toc = { item . children } path = { path } / > < / li > ) } ) } < / ul > ) }
To understand how navigation is composed, start from the bottom
To understand how navigation is composed start from the bottom