{% set sidebarnav = [
		{ label: "Introductie", class: "o-sidebar-nav__item", children: [] },
		{ label: "Informatie voor leerkrachten", class: "o-sidebar-nav__item o-sidebar-nav__item--expanded", children: 
			[
				{ label: "Subtopic 1", class: "o-sidebar-nav__item o-sidebar-nav__item--active" },
				{ label: "Subtopic 2", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 3", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 4", class: "o-sidebar-nav__item" }
			] 
		},
		{ label: "Informatie voor professionals", class: "o-sidebar-nav__item", children: 
			[
				{ label: "Subtopic 1", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 2", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 3", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 4", class: "o-sidebar-nav__item" }
			] 
		},
		{ label: "Mijn CLB", class: "o-sidebar-nav__item", children: 
			[
				{ label: "Subtopic 1", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 2", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 3", class: "o-sidebar-nav__item" },
				{ label: "Subtopic 4", class: "o-sidebar-nav__item" }
			] 
		},
		{ label: "Nuttige links", class: "o-sidebar-nav__item", children: [] }
	] 
%}

<div class="o-sidebar-nav">
	<nav>
		{% for nav in sidebarnav %}
		
		<ul class="o-sidebar-nav__items">
			<li class="{{nav.class}}">
				<a href="#">
					<span>{{nav.label}}</span>
					{% if nav.children.length %}
						<span class="icon"></span>					
					{% endif %}
				</a>
				
				{% if nav.children.length %}
					<ul class="o-sidebar-nav__items">
						{% for child in nav.children %}
							<li class="{{child.class}}" ><a href="#"><span>{{child.label}}</span></a></li>
						{% endfor %}
					</ul>
				{% endif %}
			</li>
		</ul>
		
		{% endfor %}
	</nav>
</div>