canonical / canonicalwebteam.discourse

GNU Lesser General Public License v3.0
11 stars 16 forks source link

Check for active navigation items and items with active children #129

Closed bartaz closed 2 years ago

bartaz commented 2 years ago

To support building static expandable side navigation for discourse docs this adds two new props to navigation items:

nav_item.is_active - is set when the path from request matches the nav_item.navlink_href nav_item.has_active_child - is set when any child of this nav item is currently active

This can be used in a template to create a collapsible version of the nav:

{% macro create_navigation_expandable(nav_items) %}
<ul>
  {% for element in nav_items %}
    <li>
      {% if element.navlink_href %}
        <a href="{{ element.navlink_href }}"
          {% if element.is_active %}aria-current="page"{% endif %}
        >{{ element.navlink_text }}</a>
      {% else %}
        <strong>{{ element.navlink_text }}</strong>
      {% endif %}

      {% if element.children and (element.is_active or element.has_active_child) %}
        {{ create_navigation_expandable(element.children) }}
      {% endif %}
    </li>
    {% endfor %}
  </ul>
{% endmacro %}