<div id="NavSideBar">

<ul class="nav top-level-nav flex-column mt-3">
	{% for mitem in vars.navbar_menu %}

		<li class="nav-item pb-3 {% if mitem.sub_items|default([]) is not empty %}with-submenu{% endif %}"
			{% if mitem.id|default('') is not empty %}id="{{ mitem.id }}"{% endif %}
		>

			{% if mitem.sub_items|default([]) is not empty %}
				<div class="subnav-menu" id="subnav-{{ mitem.slug }}">
					<ul class="nav flex-column pt-0 primary_side_sub_menu px-2 py-2">
						<li class="nav-item mb-0 pl-0 py-1">
							<span class="text-secondary font-italic text-monospace">{{ mitem.title }}</span>
						</li>
						{% for sub in mitem.sub_items %}
							<li class="mb-0 pl-0 py-0">
							<a class="py-1 px-0 nav-link {{ sub.classes|default([])|join( ' ' ) }}"
							   href="{{ sub.href|default('#') }}"
									{% for data_key,data_val in sub.data|default([]) %}
										data-{{ data_key }}="{{ data_val }}"
									{% endfor %}
									{% if sub.target|default('') is not empty %}target="{{ sub.target }}"{% endif %}
							>{{ sub.title }}</a>
						</li>
						{% endfor %}
					</ul>
				</div>
			{% endif %}

			<a class="nav-link p-0 mb-1 {{ mitem.classes|default([])|join( ' ' ) }} text-start"
			   href="{{ mitem.sub_items|default([]) is empty ? mitem.href|default('javascript:{}') : 'javascript:{}' }}"
					{% for data_key,data_val in mitem.data|default([]) %}
						data-{{ data_key }}="{{ data_val }}"
					{% endfor %}
					{% if sub.target|default('') is not empty %}target="{{ sub.target }}"{% endif %}
					{% if mitem.introjs|default([]) is not empty %}
						{% if mitem.introjs.title|default('') is not empty %}
							data-introtitle="{{ mitem.introjs.title }}"
						{% endif %}
						data-intro="{{ mitem.introjs.body }}"
					{% endif %}
			>

				{% if mitem.img|default('') is not empty %}
					<span class="nav-icon me-1" style="vertical-align: text-bottom;">
						{{ mitem.img|raw }}
					</span>
				{% endif %}
				<span class="top-title">
					{{ mitem.title }}
					{% if mitem.sub_items|default([]) is not empty %}
						{{ imgs.svgs.triangle|raw }}
					{% endif %}
				</span>
				{% if mitem.badge|default([]) is not empty %}
					<span class="badge bg-{{ mitem.badge.type|default('info') }}">
						{{ mitem.badge.text }}
					</span>
				{% endif %}
			</a>

		</li>

	{% endfor %}
</ul>
</div>