<div class="nav-filter">
  <div class="position-relative">
    <input type="text" id="nav_filter_input" [ngModelOptions]="{standalone: true}" placeholder="Filter menu" class="form-control" [(ngModel)]="searchText"
      tabindex="0">
    <a href="javascript:;" onclick="return false;" class="btn-primary btn-search-close js-waves-off"
      data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
      <i class="fal fa-chevron-up"></i>
    </a>
  </div>
</div>
<div class="info-card">
  <a href="javascript:;" onclick="return false;" class="pull-trigger-btn" data-action="toggle"
    data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
    <i class="fal fa-angle-down"></i>
  </a>
</div>


<!-- menu profile quick info -->
<div class="profile clearfix" style="display: none;">
  <div class="profile_pic">
    <img [src]=imagepath alt="..." class="img-circle profile_img">
  </div>
  <div class="profile_info">
    <span>Welcome,</span>
    <h2>{{username}}</h2>
  </div>
</div>
<!-- /menu profile quick info -->
<div id="sidebar-menu">
  <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}" aria-label="Search" style="display: none;">
    <!--  <p-scrollPanel [style]="{width: '100%', height: '75vh'}"class="custombar1 n-p-r"> -->
    <ul id="js-nav-menu" class="nav-menu nav">
      <ng-template #recursiveListTmpl let-list>
        <li *ngFor="let item of list | sidemenusearch:searchText" routerLinkActive='["link-active"]'
          onclick="toogleSlidebarMenu(this)">
          <a *ngIf="item.action !='' && item.children.length <= 0" [routerLink]="['/'+item.action]"
            [state]="{menuid:item.menuid,action:item.actionrights}">
            <i [class]="item.menuiconpath"></i>
            <span class="nav-link-text">{{ item.name }}
            </span>
          </a>
  
          <a *ngIf="item.children.length > 0 && item.action !=''">
            <i [class]="item.menuiconpath"></i>
            <span class="nav-link-text">{{ item.name }}
            </span>
          </a>
          <a *ngIf="item.children.length > 0  && item.action ==''">
            <i [class]="item.menuiconpath"></i>
            <span class="nav-link-text">{{ item.name }}
            </span>
          </a>
          <ul *ngIf="item.children.length > 0">
            <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: item.children }"></ng-container>
          </ul>
        </li>
      </ng-template>
      <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: list }"></ng-container>
    </ul>
    <!-- </p-scrollPanel>-->
  </div>