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:
  - home_url
  - name
properties:
  logo:
    type: object
    required:
      - alt
    additionalProperties: false
    properties:
      alt:
        type: string
      height:
        type: number
      uri:
        type: string
        format: uri-reference
        description: Path to logo image. If not set, the default logo will be set.
      width:
        type: number
  home_url:
    type: string
    format: html
  name:
    type: string
  button:
    $ref: /elements/button
  button_visible_on_mobile:
    type: boolean
    default: false
  user_navigation:
    type: string
    format: html
    description: /template-components/header/user-navigation
  transparent:
    type: boolean
    default: false
  side_nav:
    type: object
    $ref: /template-components/side-nav

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

home_url: /component?file=templates/default&variation=Home%20page
name: Finstral Jobs
side_nav:
  $ref: /template-components/side-nav
logo:
  alt: Finstal logo
  height: 32
  width: 200
$variants:
  - $name: apply now
    button:
      $ref: /elements/button
      $tpl: /elements/button
      large: true
      label: Jetzt bewerben
      classes:
        - Header-button
        - Header-button--visibleOnMobile
      iframe_id: application-form
    button_visible_on_mobile: true
    transparent: true
  - $name: Unsolicited application
    button:
      $ref: /elements/button
      $tpl: /elements/button
      large: true
      label: Initiativbewerbung
      url: /component-elements-form-variation-application-form.html
      classes:
        - Header-button
  - $name: Finstral Cloud logo
    logo:
      alt: Finstal Cloud logo
      height: 32
      uri: /img/dummy/logos/finstral-cloud.png
      width: 298
  - $name: 'Cloud: With user menu'
    button:
      $ref: /elements/button
      $tpl: /elements/button
      large: true
      label: Initiativbewerbung
      url: /component-elements-form-variation-application-form.html
      classes:
        - Header-button
    user_navigation:
      $ref: /template-components/header/user-navigation
      $tpl: /template-components/header/user-navigation
      label: Support
      url: /support.html
      classes:
        - Header-button
    logo:
      alt: Finstal Cloud logo
      height: 32
      uri: /img/dummy/logos/finstral-cloud.png
      width: 298

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

{% set logo_uri = asset_path() ~ "img/" ~ logo.uri|default("logo.svg") %}
{% set home_url = logo.url|default(home_url) %}

{% set logo_img_html %}
	{% include "@elements/image/image.twig" with {
		uri: logo_uri,
		width: logo.width ?: 310,
		height: logo.height ?: 23,
		alt: logo.alt,
		classes: ['Header-logoImage']
	} only %}
{% endset %}

<header class="Header js-Header {{ transparent ? "Header--transparent" : "" }}">
	<button
		aria-controls="side-nav"
		aria-expanded="false"
		aria-label="{{ toggle_menu_label ?? 'Open the main menu' }}"
		class="Header-sideNavButton js-Header-sideNavButton"
		id="header-menu-toggle"
		type="button"
	>
		{% include "@elements/icon/icon.twig" with {
			name: "menu",
			classes: ["Header-menuIcon", "Header-menuIconOpen"],
		} only %}
		{% include "@elements/icon/icon.twig" with {
			name: "close",
			classes: ["Header-menuIcon", "Header-menuIconClose"],
		} only %}
	</button>
	<a href="{{ home_url }}" class="Header-logoLink js-Header-logoLink">
		{{ logo_img_html }}
	</a>
	{% include "@template-components/side-nav/side-nav.twig" with {
		language_switcher: side_nav.language_switcher,
		footer_link: side_nav.footer_link,
		menu: side_nav.menu,
	} only %}

	<div class="Header-cardUserProfileCta">
		{{ user_navigation }}

		{{ button|mira({
			classes: [
				"Header-button",
				button_visible_on_mobile ? "Header-button--visibleOnMobile" : ""
			],
			large: true,
		}) }}
	</div>
</header>