header

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

{% set full_logo %}
	{% include "@elements/image/image.twig" with {
		uri: asset_path() ~ "/svg/logo.svg",
		width: 210,
		height: 64,
		alt: logo.label|default("Beck Aktuell"|t)
	} only %}
{% endset %}

{% set logo_bildmarke %}
	{% include "@elements/image/image.twig" with {
		uri: asset_path() ~ "/svg/logo-bildmarke.svg",
		width: 35.168,
		height: 40,
		alt: logo.label|default("Beck Aktuell"|t)
	} only %}
{% endset %}

<beck-page-header>
	<header class="Header js-Header u-container {{ is_compact ? 'Header-compact' : '' }}">
		<div class="Header-menuToggleContainer">
			{# Mobile menu button with combined search-menu icon #}
			{% include "@elements/button/button.twig" with {
				label: menu_button_label|default("Menü"|t),
				icon: "search-menu",
				icon_only: true,
				size: "large",
				modifiers: ["quaternary"],
				classes: ["js-HeaderMenuButton", "Header-menuButtonMobile"],
				additional_attributes: [
					["aria-expanded", "false"],
					["aria-controls", "header-menu"]
				]
			} only %}

			{# Desktop menu button with regular menu icon #}
			{% include "@elements/button/button.twig" with {
				label: menu_button_label|default("Menü"|t),
				icon: "menu",
				modifiers: ["quaternary"],
				size: "small",
				classes: ["js-HeaderMenuButton", "Header-menuButtonDesktop"],
				additional_attributes: [
					["aria-expanded", "false"],
					["aria-controls", "header-menu"]
				]
			} only %}
		</div>

		<div class="Header-logoContainer">
			{% if logo.url %}
				<a aria-labelledby="header-logo-label" class="Header-logoLink" href="{{ logo.url }}">
					<span id="header-logo-label" class="u-hiddenVisually">{{ logo.label }}</span>
					<span class="Header-logoFull">{{ full_logo }}</span>
					<span class="Header-logoBildmarke">{{ logo_bildmarke }}</span>
				</a>
			{% else %}
				<span class="Header-logoFull">{{ full_logo }}</span>
				<span class="Header-logoBildmarke">{{ logo_bildmarke }}</span>
			{% endif %}
		</div>

		<nav aria-label="{{ nav_label|default('Hauptsächlich')|t }}" class="Header-nav">
			<button class="Header-navButton Header-navButton--prev" aria-label="{{ 'Vorherige Navigation'|t }}" data-nav-prev>
				{% include "@elements/icon/icon.twig" with {
					name: "chevron",
				} only %}
			</button>
			<div class="Header-navWrapper swiper" data-header-nav-swiper>
				<div class="Header-navGradient Header-navGradient--start" data-nav-gradient-start></div>
				<ul class="Header-navItems swiper-wrapper">
					{% for item in nav_items %}
						<li class="Header-navItemContainer swiper-slide">
							{% include "@elements/button/button.twig" with {
								label: item.label,
								url: item.url,
								modifiers: ["quaternary"],
								size: item.size|default("large"),
								classes: item.active ? ["Header-navItem", "is-active"] : ["Header-navItem"]
							} only %}
						</li>
					{% endfor %}
				</ul>
				<div class="Header-navGradient Header-navGradient--end" data-nav-gradient-end></div>
			</div>
			<button class="Header-navButton Header-navButton--next" aria-label="{{ 'Nächste Navigation'|t }}" data-nav-next>
				{% include "@elements/icon/icon.twig" with {
					name: "chevron",
				} only %}
			</button>
		</nav>

		<search class="Header-search">
			<form class="Header-searchForm" action="{{ search_action|default('/search') }}" method="GET">
				{% set search_label %}
					{% include "@elements/form-elements/label/label.twig" with {
						htmlFor: "header-search-input",
						label: "Suche",
						visually_hidden: true,
					} only %}
				{% endset %}

				{% set search_input %}
					{% include "@elements/form-elements/input/input.twig" with {
						id: "header-search-input",
						name: "keys",
						type: "search",
						additional_attributes: [
							["placeholder", "Begriff, Aktenzeichen, Jobtitel"],
						],
						classes: ["Header-searchInput"],
					} only %}
				{% endset %}

				{% include "@elements/form-element-container/form-element-container.twig" with {
					label: search_label,
					form_element: search_input,
				} only %}

				{% include "@elements/button/button.twig" with {
					label: "Suche",
					icon: "search",
					icon_only: true,
					modifiers: ["primary"],
					size: "small",
					type: "submit",
					classes: ["Header-searchSubmit"]
				} only %}
			</form>
		</search>

		{# Navigation Menu Sidebar #}
		{% if menu_sections %}
			{% include "@template-components/header/menu/menu.twig" with {
				sections: menu_sections,
				label: menu_label|default("Hauptnavigation"|t)
			} only %}
		{% endif %}
	</header>
</beck-page-header>