menu

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

<div class="HeaderMenu js-HeaderMenu" id="header-menu" hidden>
	<div class="HeaderMenu-overlay"></div>
	<div class="HeaderMenu-sidebar">
		{# Desktop header - close button with text #}
		<div class="HeaderMenu-header HeaderMenu-header--desktop">
			{% include "@elements/button/button.twig" with {
				label: "Schließen"|t,
				icon: "close",
				modifiers: ["quaternary"],
				size: "large",
				classes: ["js-HeaderMenuClose"]
			} only %}
		</div>

		{# Mobile header - icon-only close button and search field #}
		<div class="HeaderMenu-header HeaderMenu-header--mobile">
			<div class="HeaderMenu-mobileHeader">
				{% include "@elements/button/button.twig" with {
					label: "Menü schließen"|t,
					icon: "close",
					icon_only: true,
					modifiers: ["quaternary"],
					size: "large",
					classes: ["js-HeaderMenuClose"]
				} only %}
				<div class="HeaderMenu-searchField">
					<form
						class="Header-searchFieldInner"
						method="GET"
						action="{{ search_action|default('/search') }}"
						role="search"
						aria-label="{{ search_label|default('Suche'|t) }}"
					>
						<input
							type="search"
							name="{{ search_input_name|default('keys') }}"
							class="Header-searchInput"
							placeholder="{{ search_placeholder|default('Begriff, Aktenzeichen, Jobtitel'|t) }}"
							autocomplete="off"
							size="1"
						/>
						{% include "@elements/button/button.twig" with {
							label: search_button_label|default("Suche"|t),
							icon: "search",
							icon_only: true,
							modifiers: ["primary"],
							size: "small",
							type: "submit",
							classes: ["Header-searchSubmit"]
						} only %}
					</form>
				</div>
			</div>
		</div>
		<div class="HeaderMenu-nav">
			{% include "@template-components/header/menu/nav/nav.twig" with {
				sections: sections,
				label: label,
			} only %}
		</div>
		<div class="HeaderMenu-footer">
			<div class="HeaderMenu-social">
				{% include "@elements/button/button.twig" with {
					label: "Instagram",
					icon: "instagram",
					icon_only: true,
					modifiers: ["quaternary"],
					size: "large",
					url: "https://instagram.com"
				} only %}
				{% include "@elements/button/button.twig" with {
					label: "Facebook",
					icon: "facebook",
					icon_only: true,
					modifiers: ["quaternary"],
					size: "large",
					url: "https://facebook.com"
				} only %}
				{% include "@elements/button/button.twig" with {
					label: "Twitter",
					icon: "twitter",
					icon_only: true,
					modifiers: ["quaternary"],
					size: "large",
					url: "https://twitter.com"
				} only %}
				{% include "@elements/button/button.twig" with {
					label: "LinkedIn",
					icon: "linkedin",
					icon_only: true,
					modifiers: ["quaternary"],
					size: "large",
					url: "https://linkedin.com"
				} only %}
			</div>
		</div>
	</div>
</div>