feat(ui): add some navigation icons

!35 #21 #22 #23
This commit is contained in:
2024-07-09 17:21:46 +09:30
parent c1a8ee65f2
commit a2a8e12046
6 changed files with 47 additions and 2 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M96-144v-648h384v144h384v504H96Zm72-72h240v-72H168v72Zm0-144h240v-72H168v72Zm0-144h240v-72H168v72Zm0-144h240v-72H168v72Zm312 432h312v-360H480v360Zm72-216v-72h168v72H552Zm0 144v-72h168v72H552Z"/></svg>

After

Width:  |  Height:  |  Size: 274 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2M16.1 17C15.91 17 15.76 16.9 15.55 16.73L10.39 12.56L8.66 16.9H7.17L11.54 6.39C11.65 6.11 11.89 5.97 12.17 5.97C12.45 5.97 12.67 6.11 12.79 6.39L16.77 15.97C16.81 16.08 16.84 16.19 16.84 16.26C16.83 16.68 16.5 17 16.1 17M12.17 8.11L14.76 14.5L10.85 11.42L12.17 8.11Z" /></svg>

After

Width:  |  Height:  |  Size: 428 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M48-144v-72h864v72H48Zm120-120q-29.7 0-50.85-21.15Q96-306.3 96-336v-408q0-29.7 21.15-50.85Q138.3-816 168-816h624q29.7 0 50.85 21.15Q864-773.7 864-744v408q0 29.7-21.15 50.85Q821.7-264 792-264H168Zm0-72h624v-408H168v408Zm0 0v-408 408Z"/></svg>

After

Width:  |  Height:  |  Size: 315 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M288-192H168q-30 0-51-21.16t-21-50.88v-432.24Q96-726 117.15-747T168-768h624v72H168v432h120v72Zm144-120q20 0 34-14t14-34q0-20-14-34t-34-14q-20 0-34 14t-14 34q0 20 14 34t34 14Zm-72 120v-72q-22-17-35-42.24-13-25.23-13-53.76 0-28.53 13-53.76 13-25.24 35-42.43V-528h144v72q22 17 35 42.24 13 25.23 13 53.76 0 28.53-13 53.76-13 25.24-35 42.43V-192H360Zm468 0H636q-15.3 0-25.65-10.35Q600-212.7 600-228v-336q0-15.3 10.35-25.65Q620.7-600 636-600h192q15.3 0 25.65 10.35Q864-579.3 864-564v336q0 15.3-10.35 25.65Q843.3-192 828-192Zm-156-72h120v-264H672v264Zm0 0h120-120Z"/></svg>

After

Width:  |  Height:  |  Size: 640 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m403-96-22-114q-23-9-44.5-21T296-259l-110 37-77-133 87-76q-2-12-3-24t-1-25q0-13 1-25t3-24l-87-76 77-133 110 37q19-16 40.5-28t44.5-21l22-114h154l22 114q23 9 44.5 21t40.5 28l110-37 77 133-87 76q2 12 3 24t1 25q0 13-1 25t-3 24l87 76-77 133-110-37q-19 16-40.5 28T579-210L557-96H403Zm59-72h36l19-99q38-7 71-26t57-48l96 32 18-30-76-67q6-17 9.5-35.5T696-480q0-20-3.5-38.5T683-554l76-67-18-30-96 32q-24-29-57-48t-71-26l-19-99h-36l-19 99q-38 7-71 26t-57 48l-96-32-18 30 76 67q-6 17-9.5 35.5T264-480q0 20 3.5 38.5T277-406l-76 67 18 30 96-32q24 29 57 48t71 26l19 99Zm18-168q60 0 102-42t42-102q0-60-42-102t-102-42q-60 0-102 42t-42 102q0 60 42 102t102 42Zm0-144Z"/></svg>

After

Width:  |  Height:  |  Size: 731 B

View File

@ -1,11 +1,51 @@
{% block navigation %}
{% for group in nav_items %}
<button class="collapsible{% if group.is_active %} active{% endif %}">{{ group.name }}</button>
<style>
span.navigation_icon {
display: inline-block;
line-height: 30px;
align-items: center;
vertical-align: middle; padding: auto; margin: 0px;
fill: #fff;
width: 25px;
height: 25px;
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 == '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 == '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 %}><a href="{{ group_urls.url }}">{{ group_urls.name }}</a></li>
<li{% if group_urls.is_active %} class="active"{% endif %}>
<span class="navigation_icon">
{% if group_urls.name == 'Devices' %}
{% include 'icons/devices.svg' %}
{% endif %}
</span>
<a href="{{ group_urls.url }}">{{ group_urls.name }}</a>
</li>
{% endfor %}
</ul>
</div>