VLEX/BPM-UI/src/app/Shared/topbar/topbar.component.html

<!-- <div class="top_nav">
   <div class="nav_menu" onclick="$('body.nav-sm #sidebar-menu .side-menu li.active, body.nav-sm #sidebar-menu .side-menu li.active-sm').removeClass('active active-sm').find('ul').hide();">
   -->
   <nav class="ml-auto d-flex">
      <div data-step="1" data-intro="Get Latest version for Tool Initiator!" style="display:none;">
         <a href="javascript:;" class="header-icon"  title="Tool Initiator download" href="/Upload/ToolInitiator.msi" target="_blank">
         <i class="fal fa-download"></i>
         </a>
      </div>
      <div>
         <a href="javascript:;" data-toggle="dropdown" class="user-profile header-icon d-flex align-items-center justify-content-center ml-2">
            <img  [src]=imagepath  class="rounded-circle profile-image" alt="">{{username}}
         </a>
         <div class="dropdown-menu dropdown-menu-animated dropdown-lg">
            <div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
               <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                  <span class="mr-2">
                  <img  [src]=imagepath class="rounded-circle profile-image" alt="">
                  </span>
                  <div class="info-card-text">
                     <div class="fs-lg text-truncate text-truncate-lg">{{username}}</div>
                     <span class="text-truncate text-truncate-md opacity-80">{{emaiid}}</span>
                  </div>
               </div>
            </div>
            <div class="settings-panel">
               <div class="mt-1 d-table w-100 px-4">
                  <div class="d-table-cell align-middle">
                     <h5 class="p-0 fw-600">
                        Preference
                     </h5>
                     <h6 class="p-0 fw-500">
                        Left Panel (Menu Bar)
                     </h6>
                     <div class="row px-1">
                        <div style="margin-right: 1px;">
                           Hide
                        </div>
                        <div style="position: absolute;
                        left: 87px;">
                           Minimized
                        </div>
                        <div class="custom-control custom-switch pr-3 mb-2" style="padding-right: 4rem !important;">                             
                           <input type="checkbox" href="javascript:;"  data-action="toggle" data-class="nav-function-hidden" title="Hide Navigation" class="custom-control-input" id="customSwitch1">
                           <label class="custom-control-label" for="customSwitch1"></label>
                        </div>
                        <div class="custom-control custom-switch pr-3 mb-2">                             
                           <input type="checkbox" href="javascript:;"  data-action="toggle" data-class="nav-function-minify" title="Minify Navigation" class="custom-control-input" id="customSwitch2">
                           <label class="custom-control-label" for="customSwitch2"></label>
                        </div>
                    <!--<div class="custom-control custom-switch mb-2">                             
                           <input type="checkbox" href="javascript:;"  data-action="toggle" data-class="nav-function-fixed" title="Lock Navigation" class="custom-control-input" id="customSwitch3">
                           <label class="custom-control-label" for="customSwitch3">Lock</label>
                        </div>-->
                     </div>
                  </div>
               </div>
            </div>
            <div class="dropdown-divider m-0"></div>
            <a href="#/changepassword" class="dropdown-item">
            <span>Change Password</span>
            </a>
          <!--  <a  href="javascript:;" class="dropdown-item">
            <span>Version {{releaseversion}}</span>
            </a>
            <a  href="javascript:;" class="dropdown-item">
               <span>
                  <app-releasenotes></app-releasenotes>
               </span>
            </a> -->
            <div class="dropdown-divider m-0"></div>
            <a href="javascript:void(0)" class="dropdown-item" (click)="show_pendinglotd()">
            <span> Log Out</span>
            <span class="float-right fa fa-sign-out"></span>
            </a>
         </div>
      </div>
   </nav>
   <div class="row">
      <ng-template #pendinglotinfoTemplate>
        <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
          <div class="modal-header" style="cursor:move" #dragHandle>
            <h4 class="modal-title pull-left" style="    margin-left: -5px;">Pending lot info</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="pendinglotinfoModalRef.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
         <table class="table" style="margin-top: -35px;">
            <tr>
               <h3>Following jobs are still open. Do you still want to log-off ?</h3>
            </tr>
          <tr>
            <td>
              <div class="form-group">
                <label style="font-size: medium;font-weight: 900;">Pending Lot = </label>&nbsp;
                <span style="font-size: 14px;">{{pendinglot}}</span>
              </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="form-group">
              <label  style="font-size: medium;font-weight: 900;">Assigned Lot = </label>&nbsp;
              <span  style="font-size: 14px;">{{assignlot}}</span>
            </div>
        </td>
      </tr>
      <tr>
          <td>
            <div class="form-group">
               <button type="button" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" (click)="closeppop()">Yes</button>
               <button type="button" class="btn btn-sm btn-outline-secondary  waves-effect waves-themed pull-right" (click)="pendinglotinfoModalRef.hide()">No</button>
              </div>
          </td>
        </tr>
         </table>
          </div>
        </div>
      </ng-template>
    </div>
   <!--   <div class="nav toggle" *ngIf="menuLength > 0">
      <a id="menu_toggle"><i class="fa fa-bars" (click)="toggleclicked()"></i></a>
      </div>  -->
   <!--  <ul class="nav navbar-nav navbar-right">
      <li class="">
        <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
           aria-expanded="false">
           <img [src]=imagepath alt="">{{username}} 
           <span class=" fa fa-angle-down"></span>
      
           <span class="user-info">{{username}} <small></small>   <span class=" fa fa-angle-down"></span></span>
          <img [src]=imagepath alt="">{{username}}
       
        </a>
        <ul class="dropdown-menu dropdown-usermenu pull-right">
      
          <li><a href="#/changepassword">Change Password</a></li>
          <li><a href="javascript:;" style="cursor: default;">Version {{releaseversion}}
          </a></li>
          <li><a><app-releasenotes></app-releasenotes></a></li>
         
          <li><a href="#/logout"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
        </ul>
      </li>
      
      
      
      
         <li data-step="1" data-intro="Get Latest version for Tool Initiator!">
        <!href address can be changed for ToolInitiator-->
   <!--     <a style="cursor:pointer;" title="Tool Initiator download" href="/Upload/ToolInitiator.msi" target="_blank">
      <i class="fa fa-download"></i>
      </a>
      </li>
      
      
      <li role="presentation" class="dropdown">
      <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
      Recent Activities  <i class="fa fa-clock-o"></i>
      
      </a>
      <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
      
      
      
      <li>
        <div class="text-center">
          <a routerLink="/home/recentactivities" [queryParams]="{recentactivities: 'document'}">
            <strong>See All Activities</strong>&nbsp;
            <i class="fa fa-angle-right"></i>
          </a>
        </div>
      </li>
      </ul>
      </li>
      
      
      
      </ul>
      </nav>
      </div>
      </div>
      -->