<mat-list *ngFor="let menu of model">
  <mat-list-item (click)="openUiElements()" routerLink="{{menu.routerLink}}" routerLinkActive="active"
    (click)="expand(menu)">
    <mat-icon>{{menu.icon}}</mat-icon>
    <span style="font-size: small;">{{ menu.langaugeLabelCode| translate }}</span>
  </mat-list-item>
  <div *ngIf="menu.isExpanded">
    <div *ngFor="let subMenu of menu.items">
      <mat-list-item routerLink="{{subMenu.routerLink}}" routerLinkActive="active" (click)="expand(subMenu)">
        <div class="circle" *ngIf="!subMenu.icon" class="sub-menu"></div>
        <mat-icon *ngIf="subMenu.icon" class="sub-menu">{{subMenu.icon}}</mat-icon>
        <span style="font-size: smaller;margin-left: 10px;">{{ subMenu.langaugeLabelCode | translate }}</span>
      </mat-list-item>
      <div *ngIf="subMenu.isExpanded">
        <div *ngFor="let componentMenu of subMenu.items">
          <mat-list-item class="ui-element" (click)="mediaScreenCheck();expand(componentMenu)"
            routerLink="{{componentMenu.routerLink}}" routerLinkActive="active">
            <div class="circle" *ngIf="!componentMenu.icon"></div>
            <mat-icon *ngIf="componentMenu.icon">{{componentMenu.icon}}</mat-icon>
            <span style="font-size: smaller;">{{ componentMenu.langaugeLabelCode| translate }}</span>
          </mat-list-item>
          <div *ngIf="componentMenu.isExpanded">
            <div *ngFor="let miniMenu of componentMenu.items">
              <mat-list-item class="ui-element" (click)="mediaScreenCheck()" routerLink="{{miniMenu.routerLink}}"
                routerLinkActive="active">
                <div class="circle" *ngIf="!miniMenu.icon"></div>
                <mat-icon *ngIf="miniMenu.icon" style="font-size: x-small;margin-top: 15px;
                padding-left: 40px;">{{miniMenu.icon}}</mat-icon>
                <span style="font-size: x-small;">{{ miniMenu.langaugeLabelCode | translate }}</span>
              </mat-list-item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</mat-list>

<!-- <mat-list>
  <mat-list-item routerLink="{{routes.DASHBOARD}}" routerLinkActive="active">
    <mat-icon>home</mat-icon> Dashboard
  </mat-list-item>
  <mat-list-item routerLink="{{routes.DASHBOARD}}" routerLinkActive="active">
    <mat-icon>home</mat-icon> Dashboard
  </mat-list-item>
  <mat-list-item routerLink="{{routes.TYPOGRAPHY}}" routerLinkActive="active">
    <mat-icon>text_fields</mat-icon> Typography
  </mat-list-item>
  <mat-list-item routerLink="{{routes.TABLES}}" routerLinkActive="active">
    <mat-icon>border_all</mat-icon> Tables
  </mat-list-item>
  <mat-list-item routerLink="{{routes.NOTIFICATION}}" routerLinkActive="active">
    <mat-icon>notifications_none</mat-icon> Notification
  </mat-list-item>
</mat-list> -->

<!-- <p class="sidebar-title">Help</p> -->

<!-- <mat-list>
  <a href="https://flatlogic.com/templates" target="_blank" style="text-decoration: none;">
    <mat-list-item>
      <mat-icon>library_books</mat-icon> Library
    </mat-list-item>
  </a>
  <a href="https://flatlogic.com/forum/" target="_blank" style="text-decoration: none;">
    <mat-list-item>
      <mat-icon>question_answer</mat-icon> Support
    </mat-list-item>
  </a>
  <a href="https://flatlogic.com/forum" target="_blank" style="text-decoration: none;">
    <mat-list-item>
      <mat-icon>help_outline</mat-icon> FAQ
    </mat-list-item>
  </a>
</mat-list> -->

<!-- <p class="sidebar-title">Projects</p>

<mat-list>
  <mat-list-item> <div class="project-circle project-circle_yellow"></div> My resend </mat-list-item>
  <mat-list-item> <div class="project-circle project-circle_blue"></div> Starred</mat-list-item>
  <mat-list-item> <div class="project-circle project-circle_pink"></div> Background </mat-list-item>
</mat-list> -->