add collapsible navigation to charm details page (#1619)

* add collapsible navigation to charm details page

* make changes to href

* change indentation

templates/details/_side-nav.html

@@ -25,7 +25,7 @@
         {% if nav_group.navlink_text %}
           <h3>{{ nav_group.navlink_text }}</h3>
         {% endif %}
-        {{ macros.create_navigation(nav_group.children, channel_requested) }}
+        {{ macros.create_navigation(nav_group.children, channel_requested, expandable=True) }}
       {% endfor %}
     </div>
   </nav>
@@ -132,3 +132,5 @@ <h2 class="p-heading--5 u-no-margin--bottom">Contact</h2>
 <h4 class="p-heading--5 u-no-margin--bottom">Discuss this {{ package.type }}</h4>
 <p>Share your thoughts on this charm with the community on discourse.</p>
 <p><a class="p-button" href="https://discourse.charmhub.io/">Join the discussion</a></p>
+
+<script src="{{ versioned_static('js/dist/docs-side-nav.js') }}"></script>

templates/partial/_macros.html

@@ -1,17 +1,30 @@
-{% macro create_navigation(nav_items, channel_requested=None) %}
-  <ul>
+{% macro create_navigation(nav_items, channel_requested=None, expandable=False, expanded=False) %}
+  <ul class="p-side-navigation__list">
     {% for element in nav_items %}
-    <li>
+    <li class="p-side-navigation__item">
       {% if element.navlink_href %}
-        <a href="{{ element.navlink_href }}{% if channel_requested %}?channel={{ channel_requested }}{% endif %}"
+        <a
+          class="p-side-navigation__link {% if expandable and element.children %}is-expandable{% endif %}"
+          href="{{ element.navlink_href }}"
+          {% if expandable and element.children %}aria-expanded={% if expanded %}"true"{% else %}"false"{% endif %}{% endif %}
           {% if request.path == element.navlink_href %}aria-current="page"{% endif %}
         >{{ element.navlink_text }}</a>
       {% else %}
-        <strong>{{ element.navlink_text }}</strong>
+        <strong
+          class="p-side-navigation__text {% if expandable and element.children %}is-expandable{% endif %}"
+          {% if expandable and element.children %}aria-expanded={% if expanded %}"true"{% else %}"false"{% endif %}{% endif %}
+        >{{ element.navlink_text }}</strong>
       {% endif %}
 
-      {% if element.children %}
-        {{ create_navigation(element.children, channel_requested) }}
+      {% if expandable %}
+        {% if element.children %}
+          <button class="p-side-navigation__expand" aria-expanded={% if element.is_active or element.has_active_child %}"true"{% else %}"false"{% endif %} aria-label="show submenu for {{ element.navlink_text }}"></button>
+        {% endif %}
+        {{ create_navigation(element.children, expandable, element.is_active or element.has_active_child) }}
+      {% else %}
+        {% if element.children %}
+          {{ create_navigation(element.children, expandable) }}
+        {% endif %}
       {% endif %}
     </li>
     {% endfor %}