<!-- <ion-nav [root]="rootPage" #mycontent swipeBackEnabled="false"></ion-nav> -->
<!-- (ionWillOpen)="menuOpened(true)" -->

<ion-app [dir]="direction">
  <ion-split-pane>
    <ion-menu [side]=" direction === 'rtl' ?  'end' : 'start'" [swipeGesture]="false">
      <ion-content class="sidebar-menu">
        <div class="header-div">
          <div>
            <ion-button class="closeIcon"  (click)="closeMenu()">
              <img  style= "height: 18px !important;"  src="../assets/imgs/close_menu_icon.png "></ion-button> 

              
          </div>
          <div *ngIf='direction==="ltr"'  style="border-bottom: rgb(190, 186, 186) solid 1px;" > 
            <img class="mohemmLogo" src="../assets/imgs/menu_mohemm_logo.png" ></div>
        
          <hr> 
          <div *ngIf='direction ==="rtl"' style="border-bottom: rgb(190, 186, 186) solid 1px;" > 
            <img class="mohemmLogo-ar" src="../assets/imgs/menu_mohemm_logo.png" ></div>
        
          <hr> 
        </div>


        <div class="centerDiv homeBox" (click)="openPersonalInfo()">
          <div [ngClass]="direction==='ltr'? 'profileDiv':'profileDiv-ar'">
            <!-- <ion-img class="profileImg" src="{{user_image}}"></ion-img> -->
            <img class="profileImg" [src]="user_image">
            <p class="TxtPlace">{{User_name_Emp}}</p>


            <p class="TxtPlaces"> {{User_Job_name}}</p>

          </div>
          
      
        </div>
    




        <!-- <div class="changeImgBtn">
          <button ion-button icon-only menuToggle class="menubutton" (click)="changeImage()">
         <ion-icon (click)="changeImage();" class="changeIcon" name="md-create"></ion-icon></button> 
        </div> -->

        


       <!-- <div class="changeImgBtn">
        <ion-button class="editIcon"  (click)="changeImage()">
       <img  style= "height: 13px !important;" src="../assets/imgs/edit_icon.png ">
      </ion-button> 

        <img class="menuImg" [src]="user_image"></div> -->


        <!-- <div class="centerDiv">
          <p class="TxtPlace">{{ts.trPK('home')}}, {{User_name_Emp}}</p>
           //<div> <img src="{{user_image}}" class="profileImg"></div>
          //<div><img class="menuImg" [src]="user_image"></div> 
          <p class="TxtPlaces">{{ts.trPK('home')}}, {{User_Job_name}}</p>
        
        </div> -->

              <div   style="border-bottom: rgb(190, 187, 187) solid 1px;" >
                <button [ngClass]="direction ==='ltr'? 'logout':'logout-ar'"  ion-button  (click)="logout();" > {{ts.trPK('home','logout')}}</button>

        
        </div>

       

        <!-- <div>
          
          <ion-item (click)="logout();">


            <ion-thumbnail slot="start" class="menu-thumb">
              <img width="30" src="../assets/imgs/signout.png" item-left>
            </ion-thumbnail>
            <ion-label>
              {{ts.trPK('home','logout')}}
            </ion-label>

          </ion-item>


        </div> -->
        <br>

        <ion-list>

          <ion-item (click)="profile()">
            <ion-thumbnail slot="start" class="menu-thumb">
              <img style= "height: 24px !important;"  src="../assets/imgs/profile_icon.png" item-left>
            </ion-thumbnail>
            <ion-label class="profile">
              {{ts.trPK('userProfile','title')}}
            </ion-label>
          </ion-item>

          <!-- <ion-item (click)="openChangePassword()"> -->
            <ion-item (click)="openChangePassword()"> 
            <ion-thumbnail slot="start" class="menu-thumb">
              <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
            </ion-thumbnail>
            <ion-label class="changepassword" >
              {{ts.trPK('login','changepassword')}}

              <ion-badge  [ngClass]=" direction === 'rtl' ?  'end-badge' : 'start-badge'" slot="end" color="danger" class="main-badge">{{notBadge}}</ion-badge>
            </ion-label>
            <!-- <button class="menu-item" ion-item  menuClose ion-item  (click)="goToWorkListPage()" >
               
               
            
            </button> -->
          </ion-item>
          <!-- <ion-item (click)="profile()">
            <ion-thumbnail slot="start" class="menu-thumb">
              <img width="30" src="../assets/imgs/profile_icon.png" item-left>
            </ion-thumbnail>
            <ion-label>
              {{ts.trPK('userProfile','title')}}
            </ion-label>
          </ion-item> -->
          <!-- <ion-item (click)="logout();">


            <ion-thumbnail slot="start" class="menu-thumb">
              <img width="30" src="../assets/imgs/signout.png" item-left>
            </ion-thumbnail>
            <ion-label>
              {{ts.trPK('home','logout')}}
            </ion-label>

          </ion-item> -->
        </ion-list>

        <div class="" style="text-align:center">
           <img src="{{companyUrl}}" class="CompanyImg logoImg">
          <p class="companyTxt">{{CompanyImageDescription}}</p>
        </div>
        <div class="menuFooter">
          <!-- <div> <img src="../assets/imgs/CS.png" class="CompanyImg"></div> -->
          <p class="companyTxt">{{companyDesc}}</p>
        </div>
      </ion-content>

    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>

  </ion-split-pane>

</ion-app>