<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>
            {{ item | sidebar_item_link}}
            {% if item.subitems %}
              <ul>
                {% for subitem in item.subitems %}
                  <li>
                    {{ subitem | sidebar_item_link}}
                  </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>