kfmc_website/src/app/dashboard/service-item/service-item.component.html

<div class="serviceItem-w" >

  <div class="itemHeader-w">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">

          <div ngbDropdown class="d-inline-block d-lg-none">
            <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" ngbDropdownToggle><i class="fas fa-bars"></i></button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
              <button class="dropdown-item" (click)="goToHome()">الرئيسيه</button>
              <button class="dropdown-item" *ngFor="let page of mobilePages; let i = index" (click)="getListPage(page)">{{page.name}}</button>
            </div>
          </div>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto" style="margin: 0 auto">
              <li class="nav-item" style="color: #fff; font-weight:bold;margin-top:13px;margin-left:10px;" (click)="goToHome()">الرئيسيه</li>
              <li class="nav-item active" *ngFor="let page of pages; let i = index">
                <a class="nav-link" style="color: #fff; padding:13px 10px; font-weight:bold"  [ngClass]="page.active == 0 ? '' : 'activeLink'" (click)="getListPage(page)">{{page.name}}</a>
              </li>
              <div class="btn-group mr-3" *ngIf="authService.showMoreLinks">
                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                  <button class="btn btn-outline-primary" ngbDropdownToggle style="background-color: transparent;border: none;color: #fff; font-weight: bold;border-right: 1px solid #00a99d;border-radius: 0;">المزيد </button>
                  <div class="dropdown-menu" ngbDropdownMenu>
                    <button class="dropdown-item" style="cursor: pointer; text-align:right;color:#00a99d" *ngFor="let extra of extraPages" (click)="getListPage(extra)">{{extra.name}}</button>
                  </div>
                </div>
              </div>
            </ul>
          </div>
        </nav>
    </div>
  </div>





  <div class="headerServices" (mouseover)="mouseOvered=true" [className]="mouseOvered ? 'showHeaderServices' : 'headerServices' ">
      <i class="fas fa-home" style="margin-left:10px;"></i>
  </div>

  <div class="serviceSideList-w" (mouseover)="mouseOvered=true" (mouseout)="mouseOvered=false" [className]="mouseOvered ? 'showServiceSideList-w' : 'serviceSideList-w' ">
    <ul class="list-unstyled">
      <li *ngFor="let service of services" (click)="onGetService(service)">
        <img src="{{authSer.pathImg + service.photo}}" />
        {{service.name}}
      </li>
    </ul>
  </div>



  <div class="listData-w text-center">
      <router-outlet></router-outlet>
  </div>

</div>