{%- if site.newToolBar and page.lang == 'en' -%}
<div class="appscms-toolbar">
  <div class="row">
    <div class="col-11 mx-auto">
      <div class="appscms-toolbar-list">
        <button class="scroll-left">&#10094;</button>
        <div id="close-nav-ham" data-open="1" class="close-nav-ham">
          <img
            class="mt-3"
            style="cursor: pointer"
            height="30px"
            width="30px"
            src="/assets/images/close-button.svg"
            alt="close-button"
          />
        </div>
        {%- if site.navigationSearch -%}
        <div class="mobile-search-bar">
          <div class="mobile-search-container">
            <input
              type="text"
              class="mobile-search-input"
              placeholder="Search Tools"
            />
            <button class="mobile-search-button">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                stroke="#ffffff"
              >
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g
                  id="SVGRepo_tracerCarrier"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></g>
                <g id="SVGRepo_iconCarrier">
                  <path
                    d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                </g>
              </svg>
            </button>
            <div id="mobile-results" class="mobile-searchbarResults"></div>
          </div>
        </div>
        {%- endif -%} {%- if Data.megaMenu -%} {%- for item in
        Data.megaMenu.dropdown -%}
        <nav class="appscms-toolbar-list-item">
          <span
            class="appscms-toolbar-list-item-span d-flex justify-content-between"
          >
            {{ item.categoryName }}
          </span>
          <div class="list-item-dropdown">
            <div class="row">
              {% if item.featuredLinks.size > 0 %}
              <section class="col-lg-4 col-md-6 appscms-featured-tools">
                <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
                {%- for i in item.featuredLinks -%}
                <a href="{{i.url}}" class="category-tools__item">
                  <figure class="icon_box v_2 v2">
                    <img src="{{i.iconSrc}}" alt="image for tools" />
                  </figure>
                  <div class="category-tools__content">
                    <h4>{{i.name}}</h4>
                    <p class="category-tools__descr gray">{{i.text}}</p>
                  </div>
                </a>
                {%- endfor -%}
              </section>
              {%- endif -%} {%- if item.links.size > 0 -%}
              <div class="col-md-8">
                <div class="appscms-other-tools">
                  <div class="expand_menu-name-categiry">OTHER TOOLS</div>

                  {% assign array_size = item.links | size %} {% assign
                  half_size = array_size | divided_by: 2 %} {% assign first_half
                  = item.links | slice: 0, half_size %} {% assign second_half =
                  item.links | slice: half_size, array_size %}

                  <div class="row">
                    <div class="col-md-6">
                      <ul class="mega_menu">
                        {%- for i in first_half | slice: 0, half -%}
                        <li>
                          <a href="{{ i.url }}">{{ i.name }}</a>
                        </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                    <div class="col-md-6">
                      <ul class="mega_menu">
                        {%- for i in second_half -%}
                        <li>
                          <a href="{{ i.url }}">{{ i.name }}</a>
                        </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              {%- endif -%}
            </div>
          </div>
        </nav>
        {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
        -%}
        <nav class="appscms-toolbar-list-item">
          <span
            class="appscms-toolbar-list-item-span d-flex justify-content-between"
          >
            {{ item.categoryName }}
          </span>
          <div class="list-item-dropdown">
            <div class="row">
              {%- if item.featuredLinks.size > 0 -%}
              <section class="col-lg-4 col-md-6 appscms-featured-tools">
                <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
                {%- for i in item.featuredLinks -%}
                <a href="{{i.url}}" class="category-tools__item">
                  <figure class="icon_box v_2 v2">
                    <img src="{{i.iconSrc}}" alt="icon-img" />
                  </figure>
                  <div class="category-tools__content">
                    <h4>{{i.name}}</h4>
                    <p class="category-tools__descr gray">{{i.text}}</p>
                  </div>
                </a>
                {%- endfor -%}
              </section>
              {%- endif -%} {%- if item.links.size > 0 -%}
              <section class="col-lg-6 col-md-8 appscms-other-tools">
                <div class="expand_menu-name-categiry">OTHER TOOLS</div>
                {% assign array_size = item.links | size %} {% assign half_size
                = array_size | divided_by: 2 %} {% assign first_half =
                item.links | slice: 0, half_size %} {% assign second_half =
                item.links | slice: half_size, array_size %}

                <div class="row">
                  <nav class="col-md-6">
                    <ul class="mega_menu">
                      {%- for i in first_half | slice: 0, half -%}
                      <li>
                        <a href="{{ i.url }}">{{ i.name }}</a>
                      </li>
                      {%- endfor -%}
                    </ul>
                  </nav>
                  <nav class="col-md-6">
                    <ul class="mega_menu">
                      {%- for i in second_half -%}
                      <li>
                        <a href="{{ i.url }}">{{ i.name }}</a>
                      </li>
                      {%- endfor -%}
                    </ul>
                  </nav>
                </div>
              </section>
              {%- endif -%}
            </div>
          </div>
        </nav>
        {%- endfor -%}
        <button class="scroll-right">&#10095;</button>
      </div>
    </div>
  </div>
</div>
{%- else -%}
<div class="appscms-toolbar">
  <div class="row">
    <div class="col-11 mx-auto">
      <div class="appscms-toolbar-list">
        <button class="scroll-left">&#10094;</button>
        <div id="close-nav-ham" data-open="1" class="close-nav-ham">
          <img
            class="mt-3"
            style="cursor: pointer"
            height="30px"
            width="30px"
            src="/assets/images/close-button.svg"
            alt="close-button"
          />
        </div>
        {%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
        <nav class="appscms-toolbar-list-item">
          <span
            class="appscms-toolbar-list-item-span d-flex justify-content-between"
          >
            {{ item.categoryName }}
          </span>
          <div class="list-item-dropdown">
            <h4 class="list-item-dropdown-heading">{{ Data.nav-link-name }}</h4>
            <div class="row">
              {%- assign count = 0 -%} {%- for i in item.links -%} {%- assign
              count = count | plus: 1 -%} {%- if count == 1 -%} {%- if site.name
              == "olarandoms" -%}
              <div class="col-xl-6">
                {%- else -%}
                <div class="col-md-6 col-lg-4">
                  {%- endif -%} {%- endif -%} {%- if count == 6 -%}
                  <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
                </div>
                {%- assign count = 0 -%} {%- else -%}
                <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
                {%- endif -%} {%- endfor -%}
              </div>
            </div>
          </div>
        </nav>
        {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
        -%}
        <nav class="appscms-toolbar-list-item">
          <span
            class="appscms-toolbar-list-item-span d-flex justify-content-between"
          >
            {{ item.categoryName }}
          </span>
          <div class="list-item-dropdown">
            <h4 class="list-item-dropdown-heading">
              {{ siteData.megaMenu.nav-link-name }}
            </h4>
            <div class="row">
              {%- assign count = 0 -%} {%- for i in item.links -%} {%- assign
              count = count | plus: 1 -%} {%- if count == 1 -%} {%- if site.name
              == "olarandoms" -%}
              <div class="col-xl-6">
                {%- else -%}
                <div class="col-md-6 col-lg-4">
                  {%- endif -%} {%- endif -%} {%- if count == 6 -%}
                  <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
                </div>
                {%- assign count = 0 -%} {%- else -%}
                <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
                {%- endif -%} {%- endfor -%}
              </div>
            </div>
          </div>
        </nav>
        {%- endfor -%}
        <button class="scroll-right">&#10095;</button>
      </div>
    </div>
  </div>
</div>
{%- endif -%}