60 lines
2.6 KiB
Plaintext
60 lines
2.6 KiB
Plaintext
<nav aria-label="subnavigation" class="np-sub-navigation">
|
|
<div class="np-sub-navigation-content">
|
|
{% for link in navigations.sub_navigation %}
|
|
{% if link.label == 'Home' %}
|
|
<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>
|
|
{% endif %}
|
|
{% break %}
|
|
{% endfor %}
|
|
|
|
<div id="courses-nav" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
|
|
<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>
|
|
|
|
{% for link in navigations.sub_navigation %}
|
|
{% unless link.label == 'Home' or link.label == 'Dashboard' or link.label == 'Catalog' %}
|
|
<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>
|
|
{% endunless %}
|
|
{% endfor %}
|
|
|
|
<div id="catalog-nav" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
|
|
<a class="np-sub-navigation-content-item-link" href="/app/catalog">
|
|
<i class="far fa-store np-button-color np-sub-navigation-content-item-icon"></i>
|
|
Catalog
|
|
</a>
|
|
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const path = window.location.pathname;
|
|
const coursesNav = document.getElementById('courses-nav');
|
|
const catalogNav = document.getElementById('catalog-nav');
|
|
if (path.includes('/app/courses')) {
|
|
coursesNav.classList.add('np-sub-navigation-content-item-active');
|
|
coursesNav.classList.remove('np-sub-navigation-content-item-inactive');
|
|
} else if (path.includes('/app/catalog')) {
|
|
catalogNav.classList.add('np-sub-navigation-content-item-active');
|
|
catalogNav.classList.remove('np-sub-navigation-content-item-inactive');
|
|
}
|
|
});
|
|
</script> |