
<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      {% unless link.label == 'Dashboard' %}
      <div class="np-sub-navigation-content-item {{ link.active_class }}">
        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
          {% if link.label == 'Catalog' %}
            Modules 
            {% else %}
            {{ link.label }}
          {% endif %}
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      </div>
    {% endunless %}
    {% endfor %}
     <div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="/app/blog">
        Announcements
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    <div id="helpDocs" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d">
        Help Docs
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
  </div>
	{% comment %}
     <div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="">
        <i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
        Help Docs
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
		</div>
		{% endcomment %}
</nav>

<script>
  const url = window.location.pathname;
  const navBlogBtn = document.querySelector('#navBlog');
  const navHelpDocBtn = document.querySelector('#helpDocs');
  const navWalmart = document.querySelector('#walmart');
  const navAdvisors = document.querySelector('#advisors');
  const navItems = document.querySelectorAll('.np-sub-navigation-content-item-link');


  if (url === '/app/blog') {
    navBlogBtn.classList.add('np-sub-navigation-content-item-active');
    navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
	} else if (url === '/app/help-docs') {
    navHelpDocBtn.classList.add('np-sub-navigation-content-item-active');
    navHelpDocBtn.classList.remove('np-sub-navigation-content-item-inactive');
	} else if (url === '/app/welcome-to-walmart') {
    navWalmart.classList.add('np-sub-navigation-content-item-active');
    navWalmart.classList.remove('np-sub-navigation-content-item-inactive');
	} else if (url === '/app/advisors') {
    navAdvisors.classList.add('np-sub-navigation-content-item-active');
    navAdvisors.classList.remove('np-sub-navigation-content-item-inactive');
	} else if (url == '/app/categories-catalog') {
    navItems.forEach(item => {
      if (item.innerText == 'Courses') {
        item.parentElement.classList.add('np-sub-navigation-content-item-active');
        item.parentElement.classList.remove('np-sub-navigation-content-item-inactive');
      }
    })
  }


</script>
