<nav class="Nav">
	{% macro list(items, index, requestedComponent, requestedVariation, type) %}
		{% set level = index + 1 %}

		<ul class="Nav-list" style="--level: {{ level }}">

			{% for item in items %}
				{% set has_children = (item.variations and item.variations|length > 0) or (item.children and item.children|length > 0) %}
				<li class="Nav-entry Nav-entry--{{ item.type }} Nav-entry--lvl{{ level }}">
					<div class="Nav-wrapper">
						{% if has_children %}
							<button
								class="Nav-toggle"
								aria-controls="{{ item.id }}"
								aria-expanded="{{ is_expanded(item, requestedComponent) ? "true" : "false" }}"
								aria-label="Toggle submenu"
							></button>
						{% endif %}

						{% if item.section == "design-tokens" and item.url %}
							<a
								class="Nav-item Nav-item--link"
								href="{{ item.url }}"
								{% if is_active_component(item, requestedComponent, requestedVariation) %}
									aria-current="page"
								{% endif %}
							>
								{{ item.name }}
							</a>
						{% elseif item.section == "docs" %}
							{% if item.isLink %}
								<a
									class="{% if item.type == "file" %}Nav-variant{% else %}Nav-item Nav-item--link{% endif %}"
									href="{{ item.route.default }}"
									{% if is_active_component(item, requestedComponent, requestedVariation) %}
										aria-current="page"
									{% endif %}
								>
									{{ item.name }}
								</a>
							{% else %}
								<span class="Nav-item Nav-item--directory">
									{{ item.name }}
								</span>
							{% endif %}
						{% elseif item.url and item.shortPath and not item.topLevel %}
							<a
								class="Nav-item Nav-item--link"
								href="{{ item.url }}"
								{% if is_active_component(item, requestedComponent, requestedVariation) %}
									aria-current="page"
								{% endif %}
							>
								{{ item.name }}
							</a>
						{% elseif item.url and not item.type %}
							<a
								class="Nav-variant"
								href="{{ item.url }}"
								{% if is_active_variant(item, requestedComponent, requestedVariation) %}
									aria-current="page"
								{% endif %}
							>
								{{ item.name }}
							</a>
						{% else %}
							<span class="Nav-item Nav-item--directory">
								{{ item.name }}
							</span>
						{% endif %}
					</div>

					{% if has_children %}
						<div
							class="Nav-children"
							id="{{ item.id }}"
							{% if not is_expanded(item, requestedComponent) %}hidden{% endif %}
						>
							{% if item.variations and item.variations|length > 0 %}
								{{ _self.list(item.variations, level, requestedComponent, requestedVariation, "variations") }}
							{% endif %}
							{% if item.children and item.children|length > 0 %}
								{{ _self.list(item.children, level, requestedComponent, requestedVariation, "components") }}
							{% endif %}
						</div>
					{% endif %}

				</li>
			{% endfor %}

		</ul>
	{% endmacro %}

	{{ _self.list(folders, -1, requestedComponent, requestedVariation, "components") }}
</nav>
