<header class="header">

   <a href="{{@website.url}}" class="logo">
      {{#if @website.logo}}
         <img src="{{@website.logo}}"alt="{{@website.name}}" width="{{@website.logoSize.width}}" height="{{@website.logoSize.height}}">
      {{else}}
         {{@website.name}}
      {{/if}}
   </a>

   {{#if menus.mainMenu}}
      <nav class="navbar js-navbar">
         <button class="navbar__toggle js-toggle" aria-label="{{ translate 'partials.menu.menu' }}">{{ translate 'partials.menu.menu' }}</button>
         {{> menu menus.mainMenu}}
      </nav>
   {{/if}}

   {{#if @config.custom.searchFeature}}
      <div class="search">
         <div class="search__overlay js-search-overlay">
            {{{@customSearchInput}}}
         </div>
         <button
            class="search__btn js-search-btn"
            aria-label="{{ translate 'search.search' }}">
            <svg role="presentation" focusable="false" height="16" width="16">
               <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#search"/>
            </svg>
         </button>
      </div>
   {{/if}}

</header>
