83 lines
2.3 KiB
Django/Jinja
83 lines
2.3 KiB
Django/Jinja
{% block navigation %}
|
|
|
|
{% for group in nav_items %}
|
|
<style>
|
|
|
|
span.navigation_icon {
|
|
display: inline-block;
|
|
line-height: 30px;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
/*padding: auto;*/
|
|
margin: 0px;
|
|
fill: #fff;
|
|
width: 20px;
|
|
height: 20px;
|
|
/*vertical-align: middle;*/
|
|
/*margin: 0px;*/
|
|
/*padding: 0px;*/
|
|
border: none;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
|
|
</style>
|
|
<button class="collapsible{% if group.is_active %} active{% endif %}">
|
|
<span class="navigation_icon">
|
|
{% if group.name == 'Assistance' %}
|
|
{% include 'icons/assistance.svg' %}
|
|
{% elif group.name == 'Access' %}
|
|
{% include 'icons/access.svg' %}
|
|
{% elif group.name == 'Config Management' %}
|
|
{% include 'icons/ansible.svg' %}
|
|
{% elif group.name == 'ITAM' %}
|
|
{% include 'icons/itam.svg' %}
|
|
{% elif group.name == 'ITIM' %}
|
|
{% include 'icons/itim.svg' %}
|
|
{% elif group.name == 'Settings' %}
|
|
{% include 'icons/settings.svg' %}
|
|
{% endif %}
|
|
</span>
|
|
{{ group.name }}
|
|
</button>
|
|
<div class="content"{% if group.is_active %} style="max-height:inherit" {% endif %}>
|
|
<ul>
|
|
{% for group_urls in group.urls %}
|
|
<li{% if group_urls.is_active %} class="active"{% endif %} style="padding-left: 40px">
|
|
<span class="navigation_icon">
|
|
{% if group_urls.name == 'Devices' %}
|
|
{% include 'icons/devices.svg' %}
|
|
{% elif group_urls.name == 'Knowledge Base' %}
|
|
{% include 'icons/information.svg' %}
|
|
{% elif group_urls.name == 'Services' %}
|
|
{% include 'icons/service.svg' %}
|
|
{% elif group_urls.name == 'Software' %}
|
|
{% include 'icons/software.svg' %}
|
|
{% elif group_urls.name == 'Groups' %}
|
|
{% include 'icons/config_management.svg' %}
|
|
{% endif %}
|
|
</span>
|
|
<a href="{{ group_urls.url }}">{{ group_urls.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
<script>
|
|
var coll = document.getElementsByClassName("collapsible");
|
|
var i;
|
|
|
|
for (i = 0; i < coll.length; i++) {
|
|
coll[i].addEventListener("click", function () {
|
|
this.classList.toggle("active");
|
|
var content = this.nextElementSibling;
|
|
if (content.style.maxHeight) {
|
|
content.style.maxHeight = null;
|
|
} else {
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|