header

// src/components/template-components/header/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header
additionalProperties: false
type: object
required:
  - logo
  - nav
properties:
  logo:
    type: object
    required:
      - label
    properties:
      label:
        type: string
      url:
        type: string
        format: uri-reference
  nav:
    type: string
    format: html
    description: template-components/header/menu

// src/components/template-components/header/mocks.yaml

logo:
  url: /
  label: Go to homepage
nav:
  $render:
    - $tpl: template-components/header/menu
      $ref: template-components/header/menu
    - $tpl: template-components/header/search
      $ref: template-components/header/search

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

{% set logo_img_html %}
	{% include "@elements/image/image.twig" with {
		uri: asset_path() ~ "/svg/logo.svg",
		width: 84,
		height: 108,
		alt: "Factorial logo"|t
	} only %}
{% endset %}

<header class="Header js-Header">
	<div class="u-container">
		<div class="Header-inner">
			{% if logo %}
				<div class="Header-logo">
					{% if logo.url %}
						<a class="Header-logoLink" href="{{ logo.url }}" aria-label="{{ logo.label }}">
							{{ logo_img_html }}
						</a>
					{% else %}
						{{ logo_img_html }}
					{% endif %}
				</div>
			{% endif %}
			{% if nav %}
				<div class="Header-nav">
					{{ nav }}
				</div>
			{% endif %}
		</div>
	</div>
</header>