<!-- <ion-header no-shadow no-border>
  <ion-toolbar>
      <nav-buttons [enableMenu]="true" [enableBack]="false" [navigate]="false"></nav-buttons>
      <ion-title>home </ion-title>
      <ion-badge id="homeBadgeBtn" item-end>{{notBadge}}</ion-badge>
  </ion-toolbar>
</ion-header> -->
<ion-content >
  <div class="header-div">
    <button ion-button icon-only menuToggle class="menubutton" (click)="openMenu()">
      <ion-icon name="menu"></ion-icon>
      <ion-badge id="homeBadgeBtn" item-end>{{notBadge}}</ion-badge>
    </button>
    <div class="centerDiv" (click)="openPersonalInfo()">
    <p class="TxtPlace">{{ts.trPK('home','hello')}}, {{userData.EMPLOYEE_DISPLAY_NAME}}</p>
    <div class="profileDiv"><ion-img class="profileImg" src="{{user_image}}"></ion-img></div>
  </div>
  </div>

  <div>
    <div>
      <p  class="dash-header text-caps">{{ts.trPK('home','dashboard')}}, {{userData.EMPLOYEE_DISPLAY_NAME}}</p>
    </div>
    <div>
      <ion-grid  class="cus-grid">
          <ion-row>
              <ion-col size="6" class="col-grid" *ngFor="let item of menuList; let i=index">
                <button ion-button block class="serviceItem" (click)="getMeunDetails(i)">
                  <img class="serviceItemImg" src="../assets/imgs/{{item.MENU_TYPE}}.png"/>
                  <p> {{ item.MENU_NAME }} {{item.SUB_MENU_NAME}}</p>
                </button>
              </ion-col>
              <ion-col size="6" class="col-grid">
                <button ion-button block class="serviceItem" (click)="attendance()">
                  <ion-img class="serviceItemImg" src="../assets/imgs/attend.png"></ion-img>
                  <p>{{ts.trPK('attendance','attendance')}}</p>
                </button>
              </ion-col>
              <ion-col size="6" class="col-grid">
                  <button ion-button block class="serviceItem" (click)="Vaction_Rule()">
                    <ion-img class="serviceItemImg" src="../assets/imgs/vacationrule.png"></ion-img>
                    <p>{{ts.trPK('vacationRule','vacationRule')}}</p>
                  </button>
                </ion-col>
              <ion-col size="6" class="col-grid">
                <button ion-button block class="serviceItem" (click)="accrualBalance()">
                  <ion-img class="serviceItemImg" src="../assets/imgs/accu.png"></ion-img>
                  <p>{{ts.trPK('absenceList','accrualBalances')}}</p>
                </button>
              </ion-col>
           
          <ion-col size="6" class="col-grid">
            <button ion-button block class="serviceItem" (click)="Change_password()">
              <ion-img class="serviceItemImg" src="../assets/imgs/changepass.png"></ion-img>
              <p>{{ts.trPK('changePassword','changePassword')}}</p>
            </button>
          </ion-col>
        </ion-row>

            <!-- <button class="menu-item" ion-item  menuClose ion-item *ngFor="let item of menuList; let i=index" (click)="getMeunDetails(i)" >
          <img width="30" src="../assets/imgs/arrownew.png" item-left  class="flipImg">
          {{ item.MENU_NAME }} {{item.SUB_MENU_NAME}}
        </button>   -->

      </ion-grid>
    </div>
  </div>

</ion-content>
