<nav class="sub-navigation">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      <div class="np-sub-navigation-content-item">
        {% if link.label == 'Catalog' %}
          <a class="np-sub-navigation-content-item-link {{ link.active_class }}" id='courses-category' href="/app/courses-category">
            {{ link.label }}
          </a>
          {%else%}
          <a class="np-sub-navigation-content-item-link {{ link.active_class }}" href="{{ link.url }}">
            {{ link.label }}
          </a>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</nav>


<script>
    document.addEventListener("DOMContentLoaded", () => {
      let link = document.getElementById('courses-category');
      
      if (window.location.pathname == '/app/courses-category') {
        link.classList.add("np-sub-navigation-content-item-active");
      } else {
        link.classList.remove("np-sub-navigation-content-item-active");
      }
  });
</script>