<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    <div class="np-sub-navigation-content-item" id="Home">
      <a class="np-sub-navigation-content-item-link" href="/app">
        <i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i>
        Home
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    
    <div class="np-sub-navigation-content-item" id="Learning Paths">
      <a class="np-sub-navigation-content-item-link" href="/app/learning_paths">
        <i class="far fa-road np-button-color np-sub-navigation-content-item-icon"></i>
        Learning Paths
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>

    <div class="np-sub-navigation-content-item" id="Courses">
      <a class="np-sub-navigation-content-item-link" href="/app/courses">
        <i class="far fa-graduation-cap np-button-color np-sub-navigation-content-item-icon"></i>
        Courses
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
</div>
</nav>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var subNavItems = document.querySelectorAll('.np-sub-navigation-content-item');
  
    subNavItems.forEach(function(item) {
      var link = item.querySelector('.np-sub-navigation-content-item-link');
      var href = link.getAttribute('href');
      var currentUrl = window.location.pathname;
  
      if (currentUrl === href) {
        item.classList.add('np-sub-navigation-content-item-active');
        item.classList.remove('np-sub-navigation-content-item-inactive');
      } else {
        item.classList.add('np-sub-navigation-content-item-inactive');
        item.classList.remove('np-sub-navigation-content-item-active');
      }
    });
  });
  </script>
  

