{% macro render_nav_items(headers) %}
  {% for h in headers %}
    {% if h.level == 2 %}
    <li class="content-nav-item content-nav-item--level-2">
      <a href="{{ h.permalink | safe }}">{{ h.title }}</a>
    </li>
    {% elif h.level == 1 and h.children %}
      {{ self::render_nav_items(headers=h.children) }}
    {% endif %}
  {% endfor %}
{% endmacro %}

{% macro render_nav_toc(headers) %}
<ul class="content-nav-list">
  {{ self::render_nav_items(headers=headers) }}
</ul>
{% endmacro %}

{% macro render_content_nav(toc) %}
{% if toc %}
<nav class="content-nav" aria-label="Navigate">
  <div class="content-nav-panel">
    <div class="content-nav-title">On this page</div>
    {{ self::render_nav_toc(headers=toc) }}
  </div>
</nav>
{% endif %}
{% endmacro %}