docs/includes/sidebar-specific-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.
 -->

{% assign product = siteTree[currentLanguage][currentVersion].products[currentProduct] %}
{% include all-products-link %}
<li title="{{product.title}}" class="sidebar-product mb-2">
  {% unless page.hidden %}
  <a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4 color-text-primary">{{ product.title }}</a>
  {% endunless %}
</li>
<li>
<ul class="sidebar-categories list-style-none">
  {% for category in product.categories %}
  {% capture fullPathToCategory %}{{category[1].href}}{% endcapture %}

  <li class="sidebar-category py-1 {% if breadcrumbs.category.href == category[1].href %}active {% if currentPath == fullPathToCategory %}is-current-page {% endif %}{% endif %}{% if category[1].standalone %}standalone-category{% endif %}">
    {% if category[1].shortTitle %}{% assign categoryTitle = category[1].shortTitle %}{% else %}{% assign categoryTitle = category[1].title %}{% endif %}
    {% if category[1].standalone %}
    <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
    {% else %}
    <details class="dropdown-withArrow details details-reset" {% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}open{% endif %}>
      <summary>
        <div class="d-flex flex-justify-between">
          <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
          {% if breadcrumbs.category.href == category[1].href or 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 breadcrumbs.category.href == category[1].href or forloop.index < 4 %}
      {% if category[1].maptopics %}
      <ul class="sidebar-topics list-style-none position-relative">
        {% for maptopic in category[1].maptopics %}
          {% unless maptopic[1].hidden %}
            {% capture fullPathToMaptopic %}{{maptopic[1].href}}{% endcapture %}
            {% if maptopic[1].shortTitle %}{% assign maptopicTitle = maptopic[1].shortTitle %}{% else %}{% assign maptopicTitle = maptopic[1].title %}{% endif %}

            <li class="sidebar-maptopic {% if breadcrumbs.maptopic.href == maptopic[1].href %}active {% if currentPath == fullPathToMaptopic %}is-current-page{% endif %}{% endif %}">
              <a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2 color-text-primary">{{ maptopicTitle }}</a>
              <ul class="sidebar-articles my-2">
                {% for article in maptopic[1].articles %}
                {% unless article[1].hidden %}
                {% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
                {% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}

                <li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
                  <a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
                </li>
                {% endunless %}
                {% endfor %}
              </ul>
            </li>
          {% endunless %}
        {% endfor %}
      </ul>
      <!-- some categories have no maptopics, only articles -->
      {% else %}
      <ul class="sidebar-articles my-2">
        {% for article in category[1].articles %}
        {% unless article[1].hidden %}
        {% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
        {% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
        <li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
          <a href="{{fullPathToArticle}}" class="pl-6 pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
        </li>
        {% endunless %}
        {% endfor %}
      </ul>
      {% endif %}
      {% endif %}
    </details>
  </li>
  {% endfor %}
</ul>
</li>