<div class="sidepane" [ngClass]=" {'sidepane-hide' : !_opened } ">
  <div class="sidepane-hori"> 
    <div *ngFor="let option of options.options" 
        class = "sidepane-opt" 
        title="{{option.title}}" 
        [ngClass]=" {'sidepane-opened' : option._opened } "
        (click)="_toggleSidebar(option);"> 
        <img src="dashboard/assets/images/{{option.image}}"  />
    </div>
  </div>
  <div class="sidepane-opt-header">
    <span>{{selectedOpt.title}}</span>

    <div class="sidepane-expand vision-ui-more_v" [matMenuTriggerFor]="sp_link" *ngIf = "selectedOpt.can_expand || selectedOpt.can_close">
    </div>
    
  </div>
  <!-- <div class="sidepane-opt-contents">
    <bi-slice-dice [hidden] = "!(selectedOpt.component == 'bi-slice-dice')"></bi-slice-dice>
    <bi-advanced [hidden] = "!(selectedOpt.component == 'bi-advanced')" ></bi-advanced>
    <bi-sql-editor [hidden] = "!(selectedOpt.component == 'bi-sql-editor')"></bi-sql-editor>
  </div> -->
  <div class="sidepane-opt-contents">
    <sell-performance [definedCellTotalJson] = "definedCellTotalJson"
    [dashBoardData] = "dashBoardData" [period] = "period" 
    [clearAllParameters] = "isSubordinateCall"></sell-performance>
  </div>
</div>
<div class="sidepane-vert" [ngClass]=" {'sidepane-hide' : _opened } ">
  <div *ngFor="let option of options.options" 
      class = "sidepane-opt" 
      title="{{option.title}}" 
      (click)="_toggleSidebar(option);">  
      <img src="dashboard/assets/images/{{option.image}}"  />
  </div>
</div>

<mat-menu #sp_link="matMenu" xPosition="before">
  <div class="sp-link" *ngIf = "selectedOpt.can_expand" (click)="_toggleSidebarWidth(!selectedOpt.expand_state)"> 
    <div class="sp-link-icon" >
       <span class="vision-ui-expand_h" *ngIf = "!selectedOpt.expand_state"></span>
       <span class="vision-ui-collapse_h" *ngIf = "selectedOpt.expand_state"></span>
    </div>	      
    <span *ngIf = "!selectedOpt.expand_state" class="sp-link-title">Expand</span>
    <span *ngIf = "selectedOpt.expand_state" class="sp-link-title">Collapse</span>
  </div>	

  <div class="sp-link" *ngIf = "selectedOpt.can_close" (click)=_toggleSidebar(selectedOpt);> 
    <span class="sp-link-icon" >
        <span class="vision-ui-cross_small"></span>
    </span>	      
    <span class="sp-link-title">Close</span>
  </div>	
</mat-menu>