Separate expander/collapser for categories

5layers.yml

@@ -117,6 +117,20 @@ pages:
         targets:
             - local
 
+    -   md: concept-amendments.md
+        funnel: Docs
+        doc_type: Concepts
+        category: Consensus Network
+        targets:
+            - local
+
+    -   md: concept-fee-voting.md
+        funnel: Docs
+        doc_type: Concepts
+        category: Consensus Network
+        targets:
+            - local
+
     -   name: References
         funnel: Docs
         doc_type: References

assets/css/devportal.css

@@ -538,22 +538,31 @@ th {
   text-transform: none;
 }
 
-#sidenav_accordion .panel-heading h5 a {
+#sidenav_accordion .panel-heading h5 .sidenav_cat_title {
   display: block;
   padding: 16px 15px;
   font-family: "open_sansregular", sans-serif;
   color: #666;
 }
 
-#sidenav_accordion .panel-heading a:before {
-    content: "\f106"; /* fontawesome angle-up */
-    font-family: FontAwesome;
-    margin-left: -20px;
-    padding-right: 5px;
-    float: right;
+#sidenav_accordion .panel-heading .sidenav_cat_toggler {
+    position: absolute;
+    right: 0;
+    padding: 15px 16px 17px 16px;
+    background-color: #ccc;
+    line-height: 0;
 }
-#sidenav_accordion .panel-heading a.collapsed:before {
-    content: "\f107"; /* fontawesome angle-down */
+
+#sidenav_accordion .panel-heading .sidenav_cat_toggler:before {
+    font-family: "FontAwesome";
+    content: "\f107";
+    display: block;
+    transition: transform 0.5s;
+    line-height: 17.7px;
+}
+#sidenav_accordion .panel-heading .sidenav_cat_toggler.collapsed:before {
+  /* content: "\f106"; */
+  transform: rotate(90deg);
 }
 
 

tool/template-sidebar_nav.html

@@ -9,9 +9,8 @@
     <div class="panel panel-default{% if currentpage.category == cat %} active{% endif %}">
       <div class="panel-heading" role="tab" id="sidenav_cat_head_{{loop.index}}">
         <h5 class="panel-title">
-          <a {% if currentpage.category != cat %}class="collapsed"{% endif %} role="button" data-toggle="collapse" data-parent="#sidenav_accordion" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">
-            {{ cat }}
-          </a>
+        <a class="{% if currentpage.category != cat %}collapsed {% endif %}sidenav_cat_toggler" role="button" data-toggle="collapse" data-parent="#sidenav_accordion" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">&nbsp;</a>
+          <a class="sidenav_cat_title" href="{{ (pages|selectattr('category', 'equalto', cat)|first).html }}">{{ cat }}</a>
         </h5>
       </div><!-- /.panel-heading -->
 
@@ -20,6 +19,7 @@
           <ul class="sidebar_cat_pagelist">
           {% set printed_subcategories = [] %}
           {% for page in catpages %}
+            {% if loop.index != 1 %}{# Skip the first element since it's linked by the category header #}
             {% if page.subcategory is undefined %}
               {% if page == currentpage %}
               <li><a class="active nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
@@ -45,6 +45,7 @@
               {% set _ = printed_subcategories.append(page.subcategory) %}
 
             {% endif %}
+            {% endif %}
           {% endfor %}
 
           </ul>