docs/includes/sidebar-product.html

<!--
  Styling note:

  Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
  hierarchy of the current page. If an item's URL is also the same as the current URL, the item
  also gets an `is-current-page` class.
 -->

{% include all-products-link %}

{% unless currentProductTree.page.hidden %}

{% if currentProductTree.renderedShortTitle %}{% assign productTitle = currentProductTree.renderedShortTitle %}{% else %}{% assign productTitle = currentProductTree.renderedFullTitle %}{% endif %}

<li title="" class="sidebar-product mb-2">
  <a href="{{currentProductTree.href}}" class="pl-4 pr-5 pb-1 f4 color-text-primary">{{ productTitle }}</a>
</li>
<li>
<ul class="sidebar-categories list-style-none">
  {% for childPage in currentProductTree.childPages %}
  {% unless childPage.page.hidden %}
  {% if childPage.page.documentType == "article" %}{% assign standaloneCategory = true %}{% else %}{% assign standaloneCategory = false %}{% endif %}
  <li class="sidebar-category py-1 {% if currentPath contains childPage.href %}active {% if currentPath == childPage.href %}is-current-page {% endif %}{% endif %}{% if standaloneCategory %}standalone-category{% endif %}">
    {% if childPage.renderedShortTitle %}{% assign childTitle = childPage.renderedShortTitle %}{% else %}{% assign childTitle = childPage.renderedFullTitle %}{% endif %}
    {% if standaloneCategory %}
    <a href="{{childPage.href}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ childTitle }}</a>
    {% else %}
    <details class="dropdown-withArrow details details-reset" {% if currentPath contains childPage.href or forloop.index < 4 %}open{% endif %}>
      <summary>
        <div class="d-flex flex-justify-between">
          <a href="{{childPage.href}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ childTitle }}</a>
          {% if forloop.index < 4 %}
          <svg xmlns="http://www.w3.org/2000/svg" class="octicon flex-shrink-0 arrow mr-3" style="margin-top:7px" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></svg>
          {% endif %}
        </div>
      </summary>
    {% endif %}
      <!-- some categories have maptopics with child articles -->
      {% if currentPath contains childPage.href or forloop.index < 4 %}
      {% if childPage.childPages[0].page.documentType == "mapTopic" %}
      <ul class="sidebar-topics list-style-none position-relative">
        {% for grandchildPage in childPage.childPages %}
        {% if grandchildPage.renderedShortTitle %}{% assign grandchildTitle = grandchildPage.renderedShortTitle %}{% else %}{% assign grandchildTitle = grandchildPage.renderedFullTitle %}{% endif %}
            <li class="sidebar-maptopic {% if currentPath contains grandchildPage.href %}active {% if currentPath == grandchildPage.href %}is-current-page{% endif %}{% endif %}">
              <a href="{{grandchildPage.href}}" class="pl-4 pr-5 py-2 color-text-primary">{{ grandchildTitle }} </a>
              <ul class="sidebar-articles my-2">
                {% for greatgrandchildPage in grandchildPage.childPages %}
                {% if greatgrandchildPage.renderedShortTitle %}{% assign greatgrandchildTitle = greatgrandchildPage.renderedShortTitle %}{% else %}{% assign greatgrandchildTitle = greatgrandchildPage.renderedFullTitle %}{% endif %}
                <li class="sidebar-article {% if currentPath contains greatgrandchildPage.href %}active {% if currentPath == greatgrandchildPage.href %}is-current-page{% endif %}{% endif %}">
                  <a href="{{greatgrandchildPage.href}}" class="pl-6 pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ greatgrandchildTitle }}</a>
                </li>
                {% endfor %}
              </ul>
            </li>
        {% endfor %}
      </ul>
      <!-- some categories have no maptopics, only articles -->
      {% elsif childPage.childPages[0].page.documentType == "article" %}
      <ul class="sidebar-articles list-style-none">
        {% for grandchildPage in childPage.childPages %}
        {% if grandchildPage.renderedShortTitle %}{% assign grandchildTitle = grandchildPage.renderedShortTitle %}{% else %}{% assign grandchildTitle = grandchildPage.renderedFullTitle %}{% endif %}
        <li class="sidebar-article {% if currentPath contains grandchildPage.href %}active {% if currentPath == grandchildPage.href %}is-current-page{% endif %}{% endif %}">
          <a href="{{grandchildPage.href}}" class="pl-6 pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ grandchildTitle }}</a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
      {% endif %}
    </details>
  </li>
  {% endunless %}
  {% endfor %}
</ul>
</li>

{% endunless %}