nav

// src/components/template-components/header/menu/nav/nav.twig

{%- if sections|length > 0 -%}
<nav class="HeaderMenuNav" aria-label="{{ label }}" itemscope itemtype="http://schema.org/SiteNavigationElement">
	<div class="HeaderMenuNav-inner">
		{%- for section in sections -%}
			<div class="HeaderMenuNav-section">
				{# Section title #}
				<div class="HeaderMenuNav-sectionTitle">
					{{ section.title }}
				</div>

				{# Section items #}
				{% if section.items %}
					<ul class="HeaderMenuNav-list HeaderMenuNav-list--{{ section.type|default('primary') }}">
						{%- for item in section.items -%}
							<li class="HeaderMenuNav-item {% if item.has_submenu %}HeaderMenuNav-item--accordion{% endif %}{% if item.is_button %} HeaderMenuNav-item--button{% endif %}">
								{% if item.is_button %}
									{# Render as ternary-style button with arrow #}
									<div class="HeaderMenuNav-buttonWrapper">
										{% include "@elements/button/button.twig" with {
											label: item.title,
											url: item.url,
											icon: "arrow-right",
											modifiers: ["ternary"],
											size: "small",
											target: item.external ? "_blank" : null
										} only %}
									</div>
								{% elseif item.has_submenu %}
									<button
										type="button"
										class="HeaderMenuNav-entry HeaderMenuNav-entry--button HeaderMenuNav-entry--{{ section.type|default('primary') }} js-HeaderMenuAccordion"
										aria-expanded="{{ item.expanded|default(false) ? 'true' : 'false' }}"
									>
										<span class="HeaderMenuNav-entryText" itemprop="name">
											{{ item.title }}
										</span>
										<span class="HeaderMenuNav-icon HeaderMenuNav-icon--accordion">
											{% include "@elements/icon/icon.twig" with {
												name: "caret-down"
											} only %}
										</span>
									</button>
									{% if item.submenu %}
										<div class="HeaderMenuNav-submenu {% if item.expanded|default(false) %}HeaderMenuNav-submenu--expanded{% endif %}">
											<ul class="HeaderMenuNav-submenuList">
												{%- for subitem in item.submenu -%}
													<li class="HeaderMenuNav-submenuItem">
														<a
															class="HeaderMenuNav-submenuLink"
															href="{{ subitem.url }}"
															itemprop="url"
															{% if subitem.external %}target="_blank" rel="noopener noreferrer"{% endif %}
														>
															{{ subitem.title }}
															{% if subitem.external %}
																<span class="HeaderMenuNav-icon">
																	{% include "@elements/icon/icon.twig" with {
																		name: "external-link"
																	} only %}
																</span>
															{% endif %}
														</a>
													</li>
												{%- endfor -%}
											</ul>
										</div>
									{% endif %}
								{% else %}
									<a
										class="HeaderMenuNav-entry HeaderMenuNav-entry--link HeaderMenuNav-entry--{{ section.type|default('primary') }}"
										href="{{ item.url }}"
										itemprop="url"
										{% if item.external %}target="_blank" rel="noopener noreferrer"{% endif %}
									>
										<span class="HeaderMenuNav-entryText" itemprop="name">
											{{ item.title }}
										</span>
										{% if item.external %}
											<span class="HeaderMenuNav-icon">
												{% include "@elements/icon/icon.twig" with {
													name: "external-link"
												} only %}
											</span>
										{% endif %}
									</a>
								{% endif %}
							</li>
						{%- endfor -%}
					</ul>
				{% endif %}

				{# Section link button #}
				{% if section.link %}
					<div class="HeaderMenuNav-sectionLink">
						{% include "@elements/button/button.twig" with {
							label: section.link.label,
							url: section.link.url,
							icon: "arrow-right",
							modifiers: ["ternary"],
			size: "small"
						} only %}
					</div>
				{% endif %}
			</div>

			{# Divider between sections (except after last section) #}
			{% if not loop.last and (section.title == 'Rechtsgebiete' or section.title == 'Themen') %}
				<div class="HeaderMenuNav-divider">
					<hr class="HeaderMenuNav-dividerLine" />
				</div>
			{% endif %}
		{%- endfor -%}
	</div>
</nav>
{%- endif -%}