<header class="site-header" data-js="site-header">
  <div class="site-header__content">
    <div class="site-header__branding">
      {{ site_header_branding_block }}
    </div>

    <ul class="site-header__utility-menu">
      <li>
        {% include "@ui-site-layout/component/menu-toggle/main-menu-toggle.twig" %}
      </li>
      <li>
        <a href="/search" aria-label="Go to site search">
          {% include "@ui-component/icon/icon.twig" with {
            icon_name: 'search'
          } %}
        </a>
      </li>
    </ul>
    <div class="site-header__site-mode">
      {% include "@ui-site-layout/component/site-mode-switcher/site-mode-switcher.twig" %}
    </div>
  </div>

  {% if site_header_main_menu %}
    <div class="site-header__menu-content">
      {{ site_header_main_menu }}

      <div class="site-header__menu-follow-us">
        {% include "@ui-component/follow-us/follow-us.twig" with {
          follow_us_social_menu: site_header_social_menu
        } %}
      </div>
    </div>
  {% endif %}
</header>
