<div class="nav-docs">
  <!-- Docs Nav -->
  {% for section in site.data.nav_docs %}
    <div class="nav-docs-section">
      <h3>{{ section.title }}</h3>
      <ul>
        {% for item in section.items %}
          <li>
            <a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
              {{ item.title }}
            </a>
            {% if item.subitems %}
              <ul>
                {% for subitem in item.subitems %}
                  <li>
                    <a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
                      {{ subitem.title }}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endfor %}

  <!-- Tips Nav -->
  {% for section in site.data.nav_tips %}
    <div class="nav-docs-section">
      <h3>{{ section.title }}</h3>
      <ul>
        {% for item in section.items %}
          <li>
            <a href="/react/tips/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endfor %}
</div>
