menu

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

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header/menu
additionalProperties: false
required:
  - main_navigation
type: object
properties:
  main_navigation:
    $ref: /template-components/header/_nav
  tree_navigation:
    type: string
    format: html
    description: patterns/tree-nav

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

main_navigation:
  $ref: template-components/header/_nav
tree_navigation:
  $tpl: patterns/tree-nav
  $ref: patterns/tree-nav

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

{% set content %}
	<div class="HeaderMenu-nav">
		{% if main_navigation.items|length > 0 %}
			{% include "@template-components/header/_nav/_nav.twig" with {
				id: "HeaderMenu-nav",
				items: main_navigation.items,
				label: main_navigation.label,
				class: "HeaderMenu-mainNav",
			} only %}
		{% endif %}
		{% if tree_navigation %}
			<div class="HeaderMenu-subNav">{{ tree_navigation }}</div>
		{% endif %}
	</div>
{% endset %}

<div class="HeaderMenu js-HeaderMenu">
	{% include "@template-components/header/_overlay/_overlay.twig" with {
		label_open: "Open menu"|t,
		label_close: "Close menu"|t,
		content: content,
		alias: "menu",
	} only %}
</div>