<nav class="sub-navigation">
  <div class="np-sub-navigation-content">
    {% comment %} {% for link in navigations.sub_navigation %}
                        <div class="np-sub-navigation-content-item {{ link.active_class }}">
                          <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
                            <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
                            {{ link.label }}
                          </a>
                          <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
                        </div>
                {% endfor %} {% endcomment %}
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app">
        <i class="fas fa-user icon-color  np-sub-navigation-content-item-icon"></i>
        In Progress
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>

    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app/courses">
        <i class="fas fa-book-alt icon-color  np-sub-navigation-content-item-icon"></i>
        Lessons
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app/learning_paths">
        <i class="fas fa-list-ul icon-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>
</nav>

<style>
  .sub-navigation {
    background: #003d29;
    padding: 20px 0;
  }
  .np-sub-navigation-content-item-link {
    color: #fff;
  }
  .icon-color {
    color: #fff;
  }
  .np-sub-navigation-content-item {
    margin: 0 15px;
  }
  .active-nav .np-sub-navigation-content-item-link {
    color: #0AAD0A;
  }
  .active-nav .icon-color {
    color: #0AAD0A;
  }
  @media (max-width: 600px) {
    .np-sub-navigation-content-item {
      margin: 0 5px;
    }
    .np-sub-navigation-content-item-link {
      font-size: 0.95rem;
      padding: 6px 4px;
    }
    .np-sub-navigation-content {
      justify-content: center;
		}
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const currentPath = window.location.pathname;
    const navItems = document.querySelectorAll(".np-sub-navigation-content-item");

    navItems.forEach(item => {
      const link = item.querySelector(".np-sub-navigation-content-item-link");
      if (link) {
        const linkPath = link.getAttribute("href");

        if (currentPath === linkPath) {
          item.classList.add("active-nav");
        }
      }
    });
  });
</script>
