remove inactive sidebar links (#16500)

Author: rachmari

includes/sidebar-specific-product.html

@@ -23,11 +23,14 @@
       <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>
+          {% 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 %}
@@ -60,6 +63,7 @@
         {% endfor %}
       </ul>
       {% endif %}
+      {% endif %}
     </details>
   </li>
   {% endfor %}

javascripts/sidebar.js

@@ -12,7 +12,7 @@ export default function () {
     menu.scrollTo(0, activeMenuItemPosition)
   }
 
-  // if the active cagetory is a standalone category, do not close the other open dropdowns
+  // if the active category is a standalone category, do not close the other open dropdowns
   const activeStandaloneCategory = document.querySelectorAll('.sidebar-category.active.standalone-category')
   if (activeStandaloneCategory.length) return
 
@@ -21,6 +21,8 @@ export default function () {
   if (allOpenDetails) {
     for (const openDetail of allOpenDetails) {
       openDetail.removeAttribute('open')
+      const svgArrowElem = openDetail.querySelector('summary > div > svg')
+      svgArrowElem.remove()
     }
   }
 }