93 lines
3.1 KiB
Plaintext
93 lines
3.1 KiB
Plaintext
<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/dashboard">
|
|
<i class="fas fa-user icon-color np-sub-navigation-content-item-icon"></i>
|
|
For You
|
|
</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">
|
|
<i class="fas fa-ellipsis-h 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/catalog">
|
|
<i class="fas fa-book-alt icon-color np-sub-navigation-content-item-icon"></i>
|
|
All 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>
|
|
All 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> |