{function sectionsRespTree}
   {foreach $sectionList as $item}
      {$photo_dimensions = $cfg.Photo.types["subsections"].size}
      <li class="nav-item nav-item-{$item.id}" data-level="{$item.level}">
         {if $item.submenu}
            <span class="toggle-sub">
               {block "sections-responsive-image"}
                  {if $item.level > 0 and $item.photo}
                     <span class="figure">
                           <img src="{get_photo photo=$item.photo type=section size='subsections'}"
                                loading="lazy" alt="{$item.title_short}" width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}"
                                class="img-responsive">
                        </span>
                  {/if}
               {/block}
               {$item.title_short}
            </span>
            <ul class="sub-nav">
               {block "sections-responsive-subnav"}
                  <li class="sub-heading toggle-back">{t}zpět{/t}</li>
                  {sectionsRespTree sectionList=$item.submenu}
                  <li class="sub-heading nav-item nav-item-{$item.id}">
                     <a href="{url s=category IDcat=$item.id}">
                        <span>{t}Všechny produkty{/t}</span>
                        <span class="fc icons_allproducts"></span>
                     </a>
                  </li>
               {/block}
            </ul>
         {else}
            <a href="{url s=category IDcat=$item.id}" class="sub-item">
               {block "sections-responsive-image"}
                  {if $item.level > 0 and $item.photo}
                     <span class="figure">
                        <img src="{get_photo photo=$item.photo type=section size='subsections'}"
                             loading="lazy" alt="{$item.title_short}" width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}"
                             class="img-responsive">

                     </span>
                  {/if}
               {/block}
               {$item.title_short}
            </a>
         {/if}
      </li>
   {/foreach}
{/function}

{if not $fromCache}
   <ul class="nav list-unstyled">
      {sectionsRespTree sectionList=$categories}
   </ul>
{else}
   {if $selection}
      <script>
         wpj.onReady.push(function () {
            var hasChildSelection = false;
            var $sectionsResponsive = $("[data-sections-responsive]");

            {foreach $selection as $item}
            {if $item@last}
            if ($sectionsResponsive.find(".nav-item-{$item}").closest('.sub-nav').length) {
               hasChildSelection = true;
            }
            $sectionsResponsive.find(".nav-item-{$item}").addClass('active').closest(".active-parent").removeClass("active-parent").addClass("active");
            {else}
            $sectionsResponsive.find(".nav-item-{$item}").addClass("active-parent");
            {/if}
            {/foreach}

            if (hasChildSelection) {
               $sectionsResponsive.addClass("has-child-selection");
            } else {
               $sectionsResponsive.removeClass("has-child-selection");
            }
         });
      </script>
   {/if}
{/if}