const createHtmlLeftMenu = () => {
        var htmlMenu = '';

        for (var item of menu){

            htmlMenu += `
            <div class="nav-item-wrapper">
                <a class="nav-link dropdown-indicator label-1" href="#reportId${item.reportId}" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="reportId${item.reportId}">
                    <div class="d-flex align-items-center">
                    <div class="dropdown-indicator-icon"><span class="fas fa-caret-right"></span></div><span class="nav-link-icon"><span data-feather="shopping-cart"></span></span><span class="nav-link-text">${item.name}</span>
                    </div>
                </a>
                ${getHtmlLeftMenuChilds(item, 'navbarVerticalCollapse')}
            </div>
              `;


        }

        return htmlMenu;
      }

      const getHtmlLeftMenuChilds = (reportItem, parentName) => {

          var reportItems = reportItem.reportItems;

          if(reportItems.length  == 0) return '';

          let childsItems = '';

          for(var child of reportItems){

          childsItems += `

          <div class="parent-wrapper label-1">
            <ul class="nav collapse parent" data-bs-parent="#${parentName}" id="reportId${reportItem.reportId}">
              <li class="collapsed-nav-item-title d-none">${reportItem.name}
              </li>
              <li class="nav-item">
                  <a class="nav-link ${ child.reportItems.length == 0? '' : 'dropdown-indicator' }"
                     href="#reportId${child.reportId}" data-bs-toggle="collapse" aria-expanded="true" aria-controls="reportId${reportItem.reportId}">

                  ${ child.reportItems.length == 0?
                    `
                      <div class="d-flex align-items-center">
                        <span class="nav-link-text">${child.name}</span>
                      </div>
                      `
                      :
                      `<div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon">
                              <span class="fas fa-caret-right"></span>
                          </div>
                          <span class="nav-link-text">${child.name}</span>
                      </div>
                      `
                    }

                </a>
                ${getHtmlLeftMenuChilds(child,'reportId' + reportItem.reportId)}
                </li>
              </ul>
          </div>
          `;
        }
        return childsItems;

      }