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">
  <a href="/{{currentLanguage}}{{product.href}}" class="pl-4 pr-5 pb-1 f4">{{ product.title }}</a>
</li>
<ul class="sidebar-categories list-style-none">
  {% for category in product.categories %}
  {% capture fullPathToCategory %}/{{currentLanguage}}{{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].standalone %}
    <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ category[1].title }}</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">{{ category[1].title }}</a>
          <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>
        </div>
      </summary>
    {% endif %}
      <!-- some categories have maptopics with child articles -->
      {% 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 %}/{{currentLanguage}}{{maptopic[1].href}}{% endcapture %}

            <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">{{ maptopic[1].title }}</a>
              <ul class="sidebar-articles my-2">
                {% for article in maptopic[1].articles %}
                {% capture fullPathToArticle %}/{{currentLanguage}}{{article[1].href}}{% endcapture %}

                <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 %}">{{ article[1].title }}</a>
                </li>
                {% endfor %}
              </ul>
            </li>
          {% endunless %}
        {% endfor %}
      </ul>
      <!-- some categories have no maptopics, only articles -->
      {% else %}
      <ul class="sidebar-articles list-style-none">
        {% for article in category[1].articles %}
        {% capture fullPathToArticle %}/{{currentLanguage}}{{article[1].href}}{% endcapture %}
        <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-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ article[1].title }}</a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
    </details>
  </li>
  {% endfor %}
</ul>