<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    <!-- Dashboard -->
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app/dashboard">
        <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Woodmack/Sun-nav+icons/Woodmac+-+icon+1.png" alt="Dashboard  icon" class="sub-nav-icon">
        Dashboard
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    <!-- Courses -->
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app/catalog">
        <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Woodmack/Sun-nav+icons/woodmac+icon+2.png" alt="Courses icon" class="sub-nav-icon">
        Courses
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>

    <!-- Learning Paths -->
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app/learning_paths">
        <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Woodmack/Sun-nav+icons/woodmac+icon+3.png" alt="Learning Paths icon" class="sub-nav-icon">
        Learning paths
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>

    <!-- Instructor Led Events -->
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="/app/training_events">
        <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Woodmack/Sun-nav+icons/icon.png" alt="Instructor Led Events icon" class="sub-nav-icon">
        Instructor led events
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>

    {% comment %}
      
    <!-- Store -->
    <div class="np-sub-navigation-content-item">
      <a class="np-sub-navigation-content-item-link" href="#">
        <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Woodmack/Sun-nav+icons/woodmac+icon+5.png" alt="Store icon" class="sub-nav-icon">
        Store
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    {% endcomment %}
  </div>
</nav>

<style>
  .np-sub-navigation {
    background: #fff;
    margin-bottom: 16px;
    padding: 32px 16px 32px 16px;
}

.np-sub-navigation-content-item-link{
  color: #010063;
  font-size: 16px;
  height: 100%;
}

.np-sub-navigation-content{
  justify-content: space-evenly;
}
.sub-nav-icon {
  width: 100%;
  height: 75px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .sub-nav-icon{
    height: 60px;
  }
}


</style>