<header class="header" id="js-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>

   {{#checkIfAny menus.mainMenu @config.custom.search}}     
      {{#if menus.mainMenu}}
         <nav class="navbar js-navbar">
            <button class="navbar__toggle js-toggle" aria-label="{{ translate 'partials.menu.menu' }}">
               <span class="navbar__toggle-box">
                  <span class="navbar__toggle-inner">{{ translate 'partials.menu.menu' }}</span>
               </span>
            </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="15" width="15">
                  <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#search"/>
               </svg>
            </button>
         </div>
      {{/if}}      
   {{/checkIfAny}}
   
</header>
