ibrahim nour

package-lock.json

@@ -1335,6 +1335,11 @@
         }
       }
     },
+    "angular2": {
+      "version": "2.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/angular2/-/angular2-2.0.0-beta.0.tgz",
+      "integrity": "sha1-l0E/q8Hq8VR6CBujrUxhcy21SDc="
+    },
     "angular2-collapsible": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/angular2-collapsible/-/angular2-collapsible-0.6.1.tgz",
@@ -1348,6 +1353,45 @@
       "resolved": "https://registry.npmjs.org/angular2-jwt/-/angular2-jwt-0.2.3.tgz",
       "integrity": "sha1-VO/do87tuoX2o3sWXyKsIrit8CE="
     },
+    "angular2-slimscroll": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/angular2-slimscroll/-/angular2-slimscroll-0.3.0.tgz",
+      "integrity": "sha1-wtvmnGh61ltENAhQnB4RCcqXdok=",
+      "requires": {
+        "angular2": "2.0.0-beta.0",
+        "es6-promise": "^3.0.2",
+        "es6-shim": "^0.33.3",
+        "reflect-metadata": "0.1.2",
+        "rxjs": "5.0.0-beta.0",
+        "systemjs": "0.19.6",
+        "zone.js": "0.5.10"
+      },
+      "dependencies": {
+        "es6-promise": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+          "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM="
+        },
+        "reflect-metadata": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.2.tgz",
+          "integrity": "sha1-6iPlgj3IMPKSgivT2puJ/Ve/+wM="
+        },
+        "rxjs": {
+          "version": "5.0.0-beta.0",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.0.0-beta.0.tgz",
+          "integrity": "sha1-GUWsWqxm0zhFbAwKZqkdiK6BQQ8="
+        },
+        "zone.js": {
+          "version": "0.5.10",
+          "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.5.10.tgz",
+          "integrity": "sha1-Bbyc8DTxInjHoiPgIdELNP2s+4E=",
+          "requires": {
+            "es6-promise": "^3.0.2"
+          }
+        }
+      }
+    },
     "angularx-flatpickr": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/angularx-flatpickr/-/angularx-flatpickr-6.1.0.tgz",
@@ -3404,6 +3448,21 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "es6-module-loader": {
+      "version": "0.17.11",
+      "resolved": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.17.11.tgz",
+      "integrity": "sha1-CU8ELjtNMIa8/Rc4Cv+r38mfNdc=",
+      "requires": {
+        "when": "^3.7.2"
+      },
+      "dependencies": {
+        "when": {
+          "version": "3.7.8",
+          "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz",
+          "integrity": "sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I="
+        }
+      }
+    },
     "es6-promise": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.5.tgz",
@@ -3419,6 +3478,11 @@
         "es6-promise": "^4.0.3"
       }
     },
+    "es6-shim": {
+      "version": "0.33.13",
+      "resolved": "https://registry.npmjs.org/es6-shim/-/es6-shim-0.33.13.tgz",
+      "integrity": "sha1-iU+4PSwuk3jI7CNlnytiso+ZQiU="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -7069,6 +7133,11 @@
         "quill": "^1.3.6"
       }
     },
+    "ngx-slimscroll": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ngx-slimscroll/-/ngx-slimscroll-7.1.0.tgz",
+      "integrity": "sha512-DkR4fWKgxmpaN75gJ96WXS9ztq2YufiPn0xqeKP3Q7b+UxryLsjWS4niteXsvNfynmA77En2wSavSQc36s7knQ=="
+    },
     "ngx-spinner": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-6.1.2.tgz",
@@ -9711,6 +9780,22 @@
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
+    "systemjs": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.19.6.tgz",
+      "integrity": "sha1-ZDB0ge0d1sB8Hx4jZ69yyZ6Y40c=",
+      "requires": {
+        "es6-module-loader": "^0.17.4",
+        "when": "^3.7.2"
+      },
+      "dependencies": {
+        "when": {
+          "version": "3.7.8",
+          "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz",
+          "integrity": "sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I="
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",

package.json

@@ -28,6 +28,7 @@
     "angular-font-awesome": "^3.1.2",
     "angular2-collapsible": "^0.6.1",
     "angular2-jwt": "^0.2.3",
+    "angular2-slimscroll": "^0.3.0",
     "angularx-flatpickr": "^6.1.0",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
@@ -50,6 +51,7 @@
     "ngx-moment": "^3.3.0",
     "ngx-pagination": "^3.2.1",
     "ngx-quill": "^3.0.0",
+    "ngx-slimscroll": "^7.1.0",
     "ngx-spinner": "^6.1.2",
     "ngx-toastr": "^9.1.1",
     "popper.js": "^1.14.6",

src/app/Internal-Page/hospital-content/hospital-content.component.css

@@ -22,7 +22,7 @@
 
 .information {
     width: 100%;
-    height: 400px;
+    min-height: 400px;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px 0;

src/app/Internal-Page/hospital-content/hospital-content.component.html

@@ -1,62 +1,66 @@
 <div class="hospitalContent-w">
   <div class="container">
     <div class="row">
-        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
-            <div class="col-6 col-md-3">
-                <div class="recordsContent-w">
-                    <ul class="list-unstyled">
-                      <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
-                          <!-- <img src="../../../assets/image/Path 148.png" *ngIf="topArrow"/>
-                          <img src="../../../assets/image/Path 147.png" *ngIf="bottomArrow"/>   -->
-                          {{hospital.name}}
-                          <div *ngIf="i == expandedIndex">  
-                              <div class="containetttt" *ngFor="let field of hospital['fields']">
-                                <ul class="list-unstyled nestedMenu">
-                                  <li (click)="showDescriptionDetails(field)" [className]=" arabicTemplate ? '' : 'achievementsLangHeading-w' ">
-                                    {{field.title}} 
-                                  </li>
-                                </ul>
-                              </div>  
-                          </div>                                  
-                      </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="col-6 col-md-9">
-              <div class="information">
-                <h2>{{detailsField.title}}</h2>
-                <p>{{detailsField.description}}</p>
+        <div class="containerContent-w">
+            <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+              <div class="row">
+                  <div class="col-6 col-md-3">
+                      <div class="recordsContent-w">
+                          <ul class="list-unstyled">
+                            <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
+                                <!-- <img src="../../../assets/image/Path 148.png" *ngIf="topArrow"/>
+                                <img src="../../../assets/image/Path 147.png" *ngIf="bottomArrow"/>   -->
+                                {{hospital.name}}
+                                <div *ngIf="i == expandedIndex">  
+                                    <div class="containetttt" *ngFor="let field of hospital['fields']">
+                                      <ul class="list-unstyled nestedMenu">
+                                        <li (click)="showDescriptionDetails(field)" [className]=" arabicTemplate ? '' : 'achievementsLangHeading-w' ">
+                                          {{field.title}} 
+                                        </li>
+                                      </ul>
+                                    </div>  
+                                </div>                                  
+                            </li>
+                          </ul>
+                      </div>
+                  </div>
+                  <div class="col-6 col-md-9">
+                    <div class="information">
+                      <h2>{{detailsField.title}}</h2>
+                      <p [innerHTML]="detailsField.description"></p>
+                    </div>
+                  </div> 
               </div>
-            </div> 
-        </ng-template>
-
-        <ng-template #englishTemplate>
-            <div class="col-6 col-md-3">
-                <div class="recordsContent-w">
-                    <ul class="list-unstyled">
-                      <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
-                          <i class="fas fa-sort-up"></i>{{hospital.name_en}}  
-                          <div *ngIf="i == expandedIndex">  
-                              <div class="containetttt" *ngFor="let field of hospital['fields']">
-                                <ul class="list-unstyled nestedMenu">
-                                  <li (click)="showDescriptionDetails(field)">
-                                    {{field.title_en}} 
-                                  </li>
-                                </ul>
-                              </div>  
-                          </div>                                  
-                      </li>
-                    </ul>
+            </ng-template>
+    
+            <ng-template #englishTemplate>
+                <div class="col-6 col-md-3">
+                    <div class="recordsContent-w">
+                        <ul class="list-unstyled">
+                          <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
+                              <i class="fas fa-sort-up"></i>{{hospital.name_en}}  
+                              <div *ngIf="i == expandedIndex">  
+                                  <div class="containetttt" *ngFor="let field of hospital['fields']">
+                                    <ul class="list-unstyled nestedMenu">
+                                      <li (click)="showDescriptionDetails(field)">
+                                        {{field.title_en}} 
+                                      </li>
+                                    </ul>
+                                  </div>  
+                              </div>                                  
+                          </li>
+                        </ul>
+                    </div>
                 </div>
-            </div>
-            <div class="col-6 col-md-9">
-              <div class="information" [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                <h2>{{detailsField.title_en}}</h2>
-                <p>{{detailsField.description_en}}</p>
-              </div>
-            </div> 
-        </ng-template>
-
+                <div class="col-6 col-md-9">
+                  <div class="information" [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                    <h2>{{detailsField.title_en}}</h2>
+                    <p>{{detailsField.description_en}}</p>
+                  </div>
+                </div> 
+            </ng-template>
+            
+        </div>
     </div>
   </div>
 </div>

src/app/Internal-Page/internal-page-content/internal-page-content.component.css

@@ -287,6 +287,22 @@ input,button {
     font-weight: bold;
     font-size: 18px;
     cursor: pointer;
+    display: inline-block;
+    /* background-color: #252525; */
+    float: left;
+    /* margin-top: -50px; */
+    /* margin-left: -44px; */
+    opacity: 0.8;
+    /* width: 45px; */
+    /* height: 65px; */
+    /* margin-top: -81px; */
+    padding: 32px 0;
+    font-size: 14px;
+    position: absolute;
+    /* top: 27px; */
+    /* left: 15px; */
+    bottom: 6px;
+    left: 6px;
 }
 
 
@@ -313,9 +329,10 @@ input,button {
 
 .servicesContent-w .serviceItem-w img {
     width: 50px;
-    height: 50px;
 }
 
+
+
 .servicesContent-w .serviceItem-w p {
     margin-top: 16px;
 }
@@ -325,12 +342,21 @@ input,button {
     transform: all 0.5s;
     margin-top: 15px;
     font-weight: bold;
+    transition: all 0.5s;
 }
 
-.servicesContent-w .serviceItem-w a:hover{
-    color: #00a99d;
+.servicesContent-w .hyperLink .serviceItem-w:hover{
+    color: #fff;
+    background: radial-gradient(#00a99d, #bda380);
 }
 
+.servicesContent-w .hyperLink .serviceItem-w:hover img{
+    -webkit-filter: grayscale(100%); 
+    filter: grayscale(100%);
+}
+
+
+
 .eventPart-w {
     width: 100%;
     height: 80px;
@@ -340,7 +366,6 @@ input,button {
     width: 100%;
     height: 55px;
     background-color: #f3f0f0;
-    padding: 0 20px;
 }
 
 .eventPart-w .event .now{
@@ -380,6 +405,7 @@ input,button {
 .contentsData-w .joinUs-w,
 .contentsData-w .joinUsEn-w{
     width: 100%;
+    margin-bottom: 20px;
 }
 
 .contentsData-w .joinUs-w .joinHeader-w,
@@ -416,7 +442,7 @@ input,button {
 .contentsData-w .joinUsEn-w .dataContent {
     width: 100%;
     padding: 30px 15px;
-    height: 200px;
+    min-height: 200px;
     margin-top: 2px;
     box-shadow: 0 0px 1px #ccc;
 }
@@ -449,6 +475,7 @@ input,button {
     font-size: 14px;
     font-weight: bold;
     color: #bda380;
+    margin: 10px 0;
 }
 
 .contentsData-w .joinUs-w .dataContent  .profileData-w  p span,
@@ -663,7 +690,7 @@ input,button {
 .tabs .recods .recordsContent-w {
     width: 100%;
     display: inline-block;
-    height: 350px;
+    min-height: 350px;
     border: 1px solid #ccc;
     padding: 0 12px;
 } 
@@ -695,12 +722,50 @@ input,button {
 }
 
 
-@media(max-width:768px) {
+@media(max-width:767px) {
     .backgroundXS {
         background-color: red;
     }
+
+    .servicesContent-w .serviceItem-w p{
+        font-size: 12px;
+    }
+
+    .eventPart-w .event {
+        min-height: 55px !important;
+    }
+
+   
+
+    .eventPart-w .event .now{
+        text-align: center;
+
+        font-size: 14px;
+        border: 1px solid #ccc;
+        padding: 10px 0;
+    }
+
+    .eventPart-w .event .next{
+        color: #007A71;
+        border-bottom: 1px solid #ccc;
+        padding: 10px 0;
+    }
+
 }
 
+@media(min-width:767px) and (max-width:991px) {
+    .backgroundXS {
+        background-color: red;
+    }
+
+    .servicesContent-w .serviceItem-w p{
+        font-size: 12px;
+    }
+    .eventPart-w .event {
+        min-height: 55px !important;
+    }
+
+}
 
 /* english estyle  */
 
@@ -735,6 +800,16 @@ input,button {
     margin: 0 10px;
 }
 
+.paragraphTemplate-w {
+    width: 100%;
+    min-height: 43px;
+    padding: 10px 0;
+    background-color: #252525;
+    opacity: 0.8;
+    color:#fff;
+    margin: 10px 0;
+}
+
 @media(max-width: 767px) {
     .tabs .lastTab-w .menuTab-w ul li {
         border-left: 0;
@@ -753,4 +828,102 @@ input,button {
         margin: 18px 0;
         font-size: 8px;
     }
+
+    .paragraphTemplate-w {
+        font-size:14px;
+    }
+
+    .eventPart-w {
+        width: 100%;
+        height: 220px;
+    }
+    
+    .eventPart-w .event {
+        width: 100%;
+        height: 205px;
+     
+    }
+
+    .lectureHeading {
+        font-size: 15px;
+        text-align: center;
+        cursor: pointer;
+        padding: 10px 0;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .contentsData-w .joinUs-w .dataContent,
+    .contentsData-w .joinUsEn-w .dataContent {
+    margin-top: 0;
+    }
+    .contentsData-w .joinUs-w .dataContent  .profileData-w {
+        text-align: center;
+    }
+    
+}
+
+@media (min-width:767px) and (max-width:991px){
+    .paragraphTemplate-w {
+        font-size: 14px
+    }
+
+
+    .eventPart-w {
+        width: 100%;
+        height: 220px;
+    }
+    
+    .eventPart-w .event {
+        width: 100%;
+        height: 205px;
+     
+    }
+
+    .lectureHeading {
+        font-size: 15px;
+        text-align: center;
+        cursor: pointer;
+        padding: 10px 0;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .eventPart-w .event {
+        min-height: 55px !important;
+    }
+
+   
+
+    .eventPart-w .event .now{
+        text-align: center;
+
+        font-size: 14px;
+        border: 1px solid #ccc;
+        padding: 10px 0;
+    }
+
+    .eventPart-w .event .next{
+        color: #007A71;
+        border-bottom: 1px solid #ccc;
+        padding: 10px 0;
+        text-align: center;
+    }
+    .contentsData-w .joinUs-w .dataContent  .profileData-w {
+        text-align: center;
+        font-size: 14px;
+    }
+
+    .contentsData-w .joinUs-w .dataContent  .profileData-w p,
+    .contentsData-w .joinUsEn-w .dataContent  .profileData-w  p {
+        font-size: 12px;
+    }
+
+    .contentsData-w .joinUs-w .joinHeading-w h2,
+    .contentsData-w .joinUsEn-w .joinHeading-w h2 {
+        font-size: 12px;
+    }
+    .tabs .lastTab-w .menuTab-w ul li {
+        border-left: 0;
+        padding: 0 43px;
+    }
+
 }

src/app/Internal-Page/internal-page-content/internal-page-content.component.html

@@ -1,197 +1,195 @@
 <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">  
     <div class="container">
-            <div class="contentPage-w">
-                    <div class="servicesContent-w">
-                            <div class="container">
-                                <div class="row">
-                                    
-                                    <div class="col-12 col-md-4">
-                                        <div class="row">
-                                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
-                                                <div class="serviceItem-w">
-                                                    <a href="{{service.link}}" target="_blank"><img src="{{authSer.pathImg + service.photo}}" />
-                                                        <p>{{service.name}}</p>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                    
-                                    <div class="col-12 col-md-8">
-                                        <div class="slider">
-                                                
-                                            <ngb-carousel #myCarousel="ngbCarousel">
-                                                <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
-                                                    <img [src]="[authSer.pathImg + report.photo]" alt="Random first slide">
-                                                    <div class="carousel-caption">
-                                                    <p [innerHTML] = "report.description"></p>
-                                                    <a class="extra" (click)="onExtraPage(report.id)" *ngIf="report.description">المزيد</a>
-                                                    </div>
-                                                </ng-template>
-                                            </ngb-carousel>
+        <div class="contentPage-w">
+            <div class="servicesContent-w">
+                <div class="container">
+                    <div class="row"> 
+                        <div class="col-12 col-md-4">
+                            <div class="row">
+                                <div class="col-6 col-md-6" *ngFor="let service of externalServices">
+                                    <a class="hyperLink" href="{{service.link}}">
+                                        <div class="serviceItem-w">
+                                            <img src="{{authSer.pathImg + service.photo}}" />
+                                            <p>{{service.name}}</p>
                                         </div>
-                                    </div>
-                    
+                                    </a>
                                 </div>
                             </div>
                         </div>
-                            
-                        <div class="eventPart-w">
-                            <div class="container">
-                                <div class="event">
-                                    <div class="row">
-                                        <div class="col-12 col-sm-12 ol-md-4">
-                                        </div>
-                                        <div class="col-12 col-sm-12 col-md-4">
-                                            <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px"/>  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
+        
+                        <div class="col-12 col-md-8">
+                            <div class="slider">
+                                    
+                                <ngb-carousel #myCarousel="ngbCarousel">
+                                    <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
+                                        <img [src]="[authSer.pathImg + report.photo]" alt="Random first slide">
+                                        <div class="carousel-caption">
+                                        <p class="paragraphTemplate-w" [innerHTML] = "report.description"></p>
+                                        <span class="extra" (click)="onExtraPage(report.id)" *ngIf="report.description">المزيد</span>
                                         </div>
-                                        <div class="col-12 col-sm-12 col-md-4">
-                                            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
+                                    </ng-template>
+                                </ngb-carousel>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+                        
+            <div class="eventPart-w">
+                <div class="container">
+                    <div class="event">
+                        <div class="row">
+                            <div class="col-12 col-sm-12 ol-md-12 col-lg-4">
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
+                                <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px"/>  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
+                                <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
+                                <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> جدول المحاضرات</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+                        
+            <div class="contentsData-w">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12 col-sm-12 col-md-4">
+                            <div class="joinUs-w">
+                                <div class="joinHeader-w">
+                                    إنضم إلينا
+                                </div>
+                                <div class="joinHeading-w">
+                                    <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
+                                </div>
+                                <div class="dataContent">
+                                    <div class="row">
+                                        <div class="col-12 col-md-12 col-lg-4">
+                                            <div class="joinUs-photo">
+                                                <img src="{{authSer.pathImg + joinUs.photo}}" /> 
+                                            </div>
                                         </div>
-                                        <div class="col-12 col-sm-12 col-md-4">
-                                            <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> جدول المحاضرات</p>
+                                        <div class="col-12 col-md-12 col-lg-8">
+                                            <div class="profileData-w">
+                                                <p>    الموظف :<span>{{joinUs.name}}</span></p>
+                                                <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
+                                                <p>   التاريخ :<span>{{joinUs.created_at}}</span></p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                            
-                        <div class="contentsData-w">
-                            <div class="container">
+                            </div>
+                            <div class="col-12 col-md-8">
+                            <div class="sharingEvent-w">
+                                <div class="sharingHeader-w">
+                                    <h2>مشاركه اللحظات</h2>
+                                </div>
                                 <div class="row">
-                                    <div class="col-12 col-sm-12 col-md-4">
-                                        <div class="joinUs-w">
-                                            <div class="joinHeader-w">
-                                                إنضم إلينا
-                                            </div>
-                                            <div class="joinHeading-w">
-                                                <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
-                                            </div>
-                                            <div class="dataContent">
-                                                <div class="row">
-                                                    <div class="col-12 col-md-4">
-                                                        <div class="joinUs-photo">
-                                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
-                                                        </div>
-                                                    </div>
-                                                    <div class="col-12 col-md-8">
-                                                        <div class="profileData-w">
-                                                            <p>    الموظف :<span>{{joinUs.name}}</span></p>
-                                                            <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
-                                                            <p>   التاريخ :<span>{{joinUs.created_at}}</span></p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                    <div class="col-12 col-md-6">
+                                        <div class="congeratolation">
+                                            <h2>التهانى</h2>
                                         </div>
+                                        <div class="content">
+                                            <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
+                                            <p class="event">{{congratulations.name}}</p>
+                                            <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
                                         </div>
-                                        <div class="col-12 col-md-8">
-                                        <div class="sharingEvent-w">
-                                            <div class="sharingHeader-w">
-                                                <h2>مشاركه اللحظات</h2>
-                                            </div>
-                                            <div class="row">
-                                                <div class="col-12 col-md-6">
-                                                    <div class="congeratolation">
-                                                        <h2>التهانى</h2>
-                                                    </div>
-                                                    <div class="content">
-                                                        <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
-                                                        <p class="event">{{congratulations.name}}</p>
-                                                        <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
-                                                    </div>
-                                                </div>
-                                                <div class="col-12 col-md-6">
-                                                    <div class="sadDead-w">
-                                                        <h2>التعازى</h2>
-                                                    </div>
-                                                    <div class="content">
-                                                        <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
-                                                        <p class="event">{{condolences.name}}</p>
-                                                        <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                    </div>
+                                    <div class="col-12 col-md-6">
+                                        <div class="sadDead-w">
+                                            <h2>التعازى</h2>
+                                        </div>
+                                        <div class="content">
+                                            <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
+                                            <p class="event">{{condolences.name}}</p>
+                                            <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
                                         </div>
                                     </div>
                                 </div>
-                                
                             </div>
                         </div>
-                            
-                        <div class="secondServices-w">
-                            <div class="container" style="height:560px; overflow-y:auto">
-                                <div class="row">
-                                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
-                                        <div class="contentSecondSer-w">
-                                            <div class="headerSer-w">
-                                                {{ser.name}}
-                                            </div>
-                                            <div class="contentSer" style="overflow:auto; overflow-x:hidden">
-                                                <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
-                                                    <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
-                                                        <div class="fieldData-w text-center">
-                                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
-                                                            <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
+                    </div>
+                </div>
+            </div>
+                        
+            <div class="secondServices-w">
+                <div class="container" style="height:560px; overflow-y:auto">
+                    <div class="row">
+                        <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+                            <div class="contentSecondSer-w">
+                                <div class="headerSer-w">
+                                    {{ser.name}}
+                                </div>
+                                <div class="contentSer" style="overflow:auto; overflow-x:hidden">
+                                    <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
+                                        <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
+                                            <div class="fieldData-w text-center">
+                                                <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                                                <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                            
-                        <div class="tabs">
-                            <div class="container">
-                                <div class="row">
-                                    <div class="col-12 col-md-8">
-                                        <div class="lastTab-w">
-                                            <div class="headerTab-w">
-                                                أخر التعاميم
-                                            </div>
-                                            <div class="menuTab-w">
-                                                <ul class="list-unstyled">
-                                                    <li (click)="onGetData(0)">التعاميم الداخليه</li>
-                                                    <li (click)="onGetData(1)">التعاميم الخارجيه</li>
-                                                    <li (click)="onGetData(2)">السياسات</li>
-                                                </ul>
-                                            </div>
-                                            <div class="menuTabContent-w">
-                                                <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
-                                                <ol>
-                                                    <li *ngFor="let data of tabsData">{{data.name}}</li>
-                                                </ol>
-                                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px;border:none;">المزيد</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col-12 col-md-4">
-                                        <div class="recods">
-                                            <div class="headerRecords-w">
-                                                إحصائيات عامه - إنجازات
-                                            </div>
-                                            <div class="recordsContent-w">
-                                                <ol>
-                                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
-                                                        <p>{{achiev.title}}</p>     
-                                                        <div *ngIf="i == expandedIndex">  
-                                                            <div class="collapse">  
-                                                                <div>  
-                                                                    <p>{{achiev.title}}</p>  
-                                                                    <p>{{achiev.descripton}}</p>  
-                                                                </div>  
-                                                            </div>  
-                                                        </div>                                  
-                                                    </li>
-                                                </ol>
-                                            </div>
-                                        </div>
-                                    </div>
+                    </div>
+                </div>
+            </div>
+                        
+            <div class="tabs">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12 col-md-12 col-lg-8">
+                            <div class="lastTab-w">
+                                <div class="headerTab-w">
+                                    أخر التعاميم
+                                </div>
+                                <div class="menuTab-w">
+                                    <ul class="list-unstyled">
+                                        <li (click)="onGetData(0)">التعاميم الداخليه</li>
+                                        <li (click)="onGetData(1)">التعاميم الخارجيه</li>
+                                        <li (click)="onGetData(2)">السياسات</li>
+                                    </ul>
+                                </div>
+                                <div class="menuTabContent-w">
+                                    <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
+                                    <ol>
+                                        <li *ngFor="let data of tabsData">{{data.name}}</li>
+                                    </ol>
+                                    <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px;border:none;">المزيد</button>
                                 </div>
                             </div>
                         </div>
+                        <div class="col-12 col-md-12 col-lg-4">
+                            <div class="recods">
+                                <div class="headerRecords-w">
+                                    إحصائيات عامه - إنجازات
+                                </div>
+                                <div class="recordsContent-w">
+                                    <ol>
+                                        <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
+                                            <p>{{achiev.title}}</p>     
+                                            <div *ngIf="i == expandedIndex">  
+                                                <div class="collapse">  
+                                                    <div>  
+                                                        <p>{{achiev.title}}</p>  
+                                                        <p>{{achiev.descripton}}</p>  
+                                                    </div>  
+                                                </div>  
+                                            </div>                                  
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div> 
 
@@ -201,7 +199,7 @@
 
 
 <ng-template #englishTemplate>
-  <div class="servicesContent-w">
+  <div class="servicesContent-w" style="direction:ltr">
     <div class="container">
       <div class="row">
 
@@ -236,19 +234,19 @@
     </div>
   </div>
 
-  <div class="eventPart-w">
+  <div class="eventPart-w" style="direction:ltr">
     <div class="container">
       <div class="event">
         <div class="row">
-          <div class="col-12 col-sm-12 ol-md-4">
+          <div class="col-12 col-sm-12 ol-md-12 col-lg-4">
           </div>
-          <div class="col-12 col-sm-12 col-md-4">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-4">
             <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px;"/>   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</span></p>
           </div>
-          <div class="col-12 col-sm-12 col-md-4">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-4">
             <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
           </div>
-            <div class="col-12 col-sm-12 col-md-4">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
                 <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> Lecture Table</p>
             </div>
         </div>
@@ -256,7 +254,7 @@
     </div>
   </div>
 
-  <div class="contentsData-w">
+  <div class="contentsData-w" style="direction:ltr">
     <div class="container">
       <div class="row">
         <div class="col-12 col-sm-12 col-md-4">
@@ -269,12 +267,12 @@
             </div>
             <div class="dataContent">
               <div class="row">
-                <div class="col-12 col-md-4">
+                <div class="col-12 col-md-12 col-lg-4">
                   <div class="joinUs-photo">
                     <img src="{{authSer.pathImg + joinUs.photo}}" />
                   </div>
                 </div>
-                <div class="col-12 col-md-8">
+                <div class="col-12 col-md-12 col-lg-8">
                   <div class="profileData-w">
                     <p> Employee : <span>{{joinUs.name_en}}</span></p>
                     <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>

src/app/Internal-Page/internal-page-content/internal-page-content.component.ts

@@ -1,10 +1,12 @@
 import { UserService } from './../../shared/user.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
-import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild, EventEmitter } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
 import { NgxSpinnerService } from 'ngx-spinner';
 import {NgbCarousel,NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';
+import {SlimScroll} from 'angular2-slimscroll';
+import { ISlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';
 
 
 @Component({
@@ -63,6 +65,9 @@ export class InternalPageContentComponent implements OnInit {
     }
 
 
+    opts: ISlimScrollOptions;
+    scrollEvents: EventEmitter<SlimScrollEvent>;
+
   ngOnInit() {
 
     this.spinner.show();
@@ -78,6 +83,25 @@ export class InternalPageContentComponent implements OnInit {
    //console.log(this.checkTokenExpire);
        //get profile data
     this.userservice.getUserDataProfile();
+
+    this.scrollEvents = new EventEmitter<SlimScrollEvent>();
+    this.opts = {
+      position: "left", // left | right
+      barBackground: "#C9C9C9", // #C9C9C9
+      barOpacity: "0.8", // 
+      barWidth: "10", // 10
+      barBorderRadius: "20", // 20
+      barMargin: "0", // 0
+      gridBackground: "#D9D9D9", // #D9D9D9
+      gridOpacity: "1", // 1
+      gridWidth: "2", // 2
+      gridBorderRadius: "20", // 20
+      gridMargin: "0", // 0
+      alwaysVisible: true, // true
+      visibleTimeout: 1000, // 1000
+    }
+
+    this.play();
   
     //get slider data
     this.internalService.getSliderData().subscribe(
@@ -228,4 +252,56 @@ export class InternalPageContentComponent implements OnInit {
     this.router.navigate(['InternalPage/events']);
   }
 
+  play(): void {
+    let event = null;
+
+    Promise.resolve()
+      .then(() => this.timeout(3000))
+      .then(() => {
+        event = new SlimScrollEvent({
+          type: 'scrollToBottom',
+          duration: 2000,
+          easing: 'inOutQuad'
+        });
+
+        this.scrollEvents.emit(event);
+      })
+      .then(() => this.timeout(3000))
+      .then(() => {
+        event = new SlimScrollEvent({
+          type: 'scrollToTop',
+          duration: 3000,
+          easing: 'outCubic'
+        });
+
+        this.scrollEvents.emit(event);
+      })
+      .then(() => this.timeout(4000))
+      .then(() => {
+        event = new SlimScrollEvent({
+          type: 'scrollToPercent',
+          percent: 80,
+          duration: 1000,
+          easing: 'linear'
+        });
+
+        this.scrollEvents.emit(event);
+      })
+      .then(() => this.timeout(2000))
+      .then(() => {
+        event = new SlimScrollEvent({
+          type: 'scrollTo',
+          y: 200,
+          duration: 4000,
+          easing: 'inOutQuint'
+        });
+
+        this.scrollEvents.emit(event);
+      });
+  }
+
+  timeout(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(() => resolve(), ms));
+  }
+
 }

src/app/Internal-Page/internal-page-header/internal-page-header.component.css

@@ -4,7 +4,7 @@ input,button {
 
 .internalHeader-w {
     width: 100%;
-    height: 30px;
+    height: 35px;
     background-color: #e3dfdf;
 
     /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
@@ -254,13 +254,12 @@ input,button {
 
 .pagesHeader-w .iconMenu {
     width: 35px;
-    height: 35px;
     float: right;
-    margin: 0 5px;
+    margin: 5px 5px;
 }
 
 .pagesHeader-w .parentName-w {
-    margin: 10px 5px;
+    margin: 9px 5px;
     display: inline-block;
 }
 
@@ -338,6 +337,30 @@ input,button {
     margin: 0 5px;
 }
 
+.mobileMenu-w {
+    float: right !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-color: transparent !important;
+  
+}
+
+.activeHeaderMenu{
+    float: left;
+}
+
+.activeHomeMenu {
+    float: left !important;
+    margin: 0 5px;
+    background-color: transparent;
+    border: none;
+    color: #00a99d;
+    margin: 0 19px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+
 @media(max-width: 767px) {
     .tabs .lastTab-w .menuTab-w ul li {
         border-left: 0;
@@ -401,4 +424,55 @@ input,button {
         margin: 0;
         margin-right: -15px;
     }
+
+    .pagesHeader-w .navbar {
+        display: initial;
+        text-align: initial;
+        justify-content: initial;
+    }
+
+    .dropDownMobile-w{
+        left: -140px !important;
+        text-align: right;
+    }
+    .pagesHeader-w .dropdown {
+        float: right;
+    }
+
+    .btn-outline-primary {
+        border-color: transparent;
+        font-size: 30px;
+    }
+
+    .dropdown-toggle::after {
+        display: none;
+    }
 }
+
+@media (min-width: 767px) and (max-width: 991px) {
+    
+    .pagesHeader-w .navbar {
+        display: initial;
+        text-align: initial;
+        justify-content: initial;
+    }
+
+    .mobileMenu-w {
+        float: right !important;
+    }
+    .dropDownMobile-w{
+        left: -80px !important;
+        text-align: right;
+    }
+    .pagesHeader-w .dropdown {
+        float: right;
+        font-size: 12px;
+    }
+    .btn-outline-primary {
+        border-color: transparent;
+        font-size: 30px;
+    }
+    .dropdown-toggle::after {
+        display: none;
+    }
+}

src/app/Internal-Page/internal-page-header/internal-page-header.component.html

@@ -31,6 +31,10 @@
                     <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
                     <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                 </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-md hidden-lg">
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
             </div>
         </div>
     </div>
@@ -62,17 +66,45 @@
         <div class="container">
             <div class="row">
                 <div class="navbar" style="padding:0">
-                    <button class="dropbtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
-                        <!-- <i class="fas fa-home"></i>  -->
+                    <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
+                        <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()" style="font-weight:bold; color:#00A99D;font-size:14px;">الرئيسيه</button>
+                            <div *ngFor="let parent of parentsPage; let i = index" class="dropdown">
+                                    <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                                        <span class="parentName-w"> {{parent.name}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
+                                        <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                    </button>
+                                    <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                                        <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span> </a>
+                                        <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                        <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                                    </button>
+                                    <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                                        <div class="row">
+                                            <div *ngFor="let child of parent['childs']" style="width:100%;">
+                                                <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
+                                                    <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
+                                                        <a href="{{child.link}}"> {{child.name}}</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                        </div>
+                    </div>
+
+                    <button class="dropbtn d-none d-sm-none d-md-none d-lg-block" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
                         <a style="cursor: pointer; font-size:18px; font-weight:bold"> <span class="parentName-w">الرئيسيه</span></a>
                     </button>
-                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown">
+                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown d-none d-sm-none d-md-none d-lg-block">
                         <button class="dropbtn" *ngIf="parent['childs'].length > 0">
                             <span class="parentName-w"> {{parent.name}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
                             <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                         </button>
                         <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                            <a href="{{parent.link}}" target="_blank" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span> </a>
+                            <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span> </a>
                             <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                             <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                         </button>
@@ -81,7 +113,7 @@
                                 <div *ngFor="let child of parent['childs']" style="width:100%;">
                                     <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
                                         <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
-                                            <a href="{{child.link}}" target="_blank"> {{child.name}}</a>
+                                            <a href="{{child.link}}"> {{child.name}}</a>
                                         </li>
                                     </ul>
                                 </div>
@@ -127,6 +159,10 @@
                     <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
                     <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                 </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-md hidden-lg">
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
             </div>
         </div>
     </div>
@@ -158,25 +194,54 @@
         <div class="container">
             <div class="row">
                 <div class="navbar">
-                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown">
+                        <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
+                                <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()" [className]=" arabicTemplate ? '' : 'activeHomeMenu' ">Home</button>
+                                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown" [className]=" arabicTemplate ? '' : 'activeHeaderMenu' ">
+                                        <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                                            <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
+                                            <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                        </button>
+                                        <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                                            <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name_en}} </span> </a>
+                                            <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                            <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                                        </button>
+                                        <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                                            <div class="row">
+                                                <div *ngFor="let child of parent['childs']" style="width:100%;">
+                                                    <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
+                                                        <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
+                                                            <a href="{{child.link}}"> {{child.name_en}}</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown d-none d-sm-none d-md-none d-lg-block">
                         <button class="dropbtn" *ngIf="parent['childs'].length > 0">
                             <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                             <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
                         </button>
                         <button class="dropbtn" *ngIf="parent['childs'].length == 0">
                             <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" [className]=" arabicTemplate ? '' : 'activeLanguageIcon' " />
-                            <a href="{{parent.link}}" target="_blank" style="text-decoration:none"><span class="parentName-w"> {{parent.name_en}} </span> </a>
+                            <a href="{{parent.link}}" style="text-decoration:none"><span class="parentName-w"> {{parent.name_en}} </span> </a>
                             <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                         </button>
                         <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
                             <ul class="list-unstyled">
                                 <li  *ngFor="let child of parent['childs']" [className]="arabicTemplate ? '' : 'menuEnglish' ">
-                                    <a href="{{child.link}}" target="_blank"> {{child.name_en}}</a>
+                                    <a href="{{child.link}}"> {{child.name_en}}</a>
                                 </li>
                             </ul>
                         </div>
                     </div>
-                    <button class="dropbtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
+                    <button class="dropbtn d-none d-sm-none d-md-none d-lg-block" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
                         <a style="cursor: pointer; font-size:18px; font-weight:bold"> <span class="parentName-w">Home</span></a>
                     </button>
                 </div>

src/app/app.component.html

@@ -6,5 +6,4 @@
  type = "ball-clip-rotate-pulse"
  ></ngx-spinner>
 
-
 <app-dashboard-content></app-dashboard-content>

src/app/app.component.ts

@@ -1,19 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
-
-  constructor() {
 
-  }
+export class AppComponent implements OnInit {
 
+ 
 
+  ngOnInit() {
 
-  ngOnInit() {}
-   
+  }
 
+ 
 }
+

src/app/app.module.ts

@@ -94,6 +94,8 @@ import { FlatpickrModule } from 'angularx-flatpickr';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { ShortenPipe } from './shorten.pipe';
+import { NgSlimScrollModule, SLIMSCROLL_DEFAULTS } from 'ngx-slimscroll';
+
 
 
 
@@ -164,6 +166,7 @@ import { ShortenPipe } from './shorten.pipe';
     AlifeFileToBase64Module,
     BrowserAnimationsModule,  // <-- include required BrowserAnimationsModule
     CollapsibleModule,
+    NgSlimScrollModule,
     ToastrModule.forRoot(), // ToastrModule added
     NgbModule.forRoot(),
     FlatpickrModule.forRoot(),

src/app/dashboard/service-item/service-item.component.css

@@ -5,13 +5,17 @@
     direction: rtl;
     font-family: 'Cairo', sans-serif;
 }
+
+.serviceItem-w .navbar {
+    padding: 0;
+}
 /* .listData-w {
     min-height: 500px;
 } */
 
 .serviceItem-w .itemHeader-w {
     width: 100%;
-    height: 70px;
+    height: 50px;
     background-color: #ecdcc7;
 }
 
@@ -103,11 +107,11 @@
     text-align: right;
     border: 1px solid #bda380;
     display: none;
-    z-index: 9999999;
+    z-index: 9999999999;
   }
 
   .showServiceSideList-w{
-    width: 200px;
+    width: 250px;
     min-height: 200px;
     position: fixed;
     cursor: pointer;
@@ -122,6 +126,33 @@
     z-index: 9999999;
   }
 
+  .showServiceSideList-w ul {
+      width: 100%;
+      padding: 0 25px;
+  }
+
+  .showServiceSideList-w ul li{
+      margin: 10px 0;
+      border-bottom: 1px solid #ccc;
+      padding: 10px 0;
+      font-size: 12px;
+      transition: all 0.5s;
+  }
+
+  .showServiceSideList-w ul li:hover{
+      color: #252525;
+  }
+
+  .showServiceSideList-w ul li:hover img{
+    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+    filter: grayscale(100%);
+} 
+
+  .showServiceSideList-w ul li img {
+    width: 25px;
+    margin: 0 5px;
+}
+
 
   .serviceSideList-w ul {
       width: 100%;
@@ -130,14 +161,20 @@
   .serviceSideList-w ul li{
       text-align: right;
       margin: 10px 0;
+      border-bottom: 1px solid #ccc;
+      font-size: 15px;
+    transform: all 0.5s;
+    color: #bda380;
+
   }
 
-  .serviceSideList-w ul li a{
-    font-size: 15px;
-    transform: all 0.5s;
-    color: #bda380
+  .serviceSideList-w ul li img {
+      width: 25px;
+      margin: 0 5px;
   }
 
+
+
   .serviceSideList-w ul li a:hover{
       color: #00a99d;
   }

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

@@ -13,14 +13,14 @@
           </div>
         
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav mr-auto" style="margin: 5px auto">
-              <li class="nav-item" style="color: #00a99d; font-weight:bold;margin:7px;" (click)="goToHome()">الرئيسيه</li>
+            <ul class="navbar-nav mr-auto" style="margin: 0 auto">
+              <li class="nav-item" style="color: #00a99d; 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: #00a99d; font-weight:bold"  [ngClass]="page.active == 0 ? '' : 'activeLink' " (click)="getListPage(page)">{{page.name}}</a>
+                <a class="nav-link" style="color: #00a99d; 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>المزيد </button>
+                  <button class="btn btn-outline-primary" ngbDropdownToggle style="background-color: transparent;border: none;color: #00a99d; 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>
@@ -42,7 +42,10 @@
   
   <div class="serviceSideList-w" (mouseout)="mouseOvered=false" [className]="mouseOvered ? 'showServiceSideList-w' : 'serviceSideList-w' ">
     <ul class="list-unstyled">
-      <li *ngFor="let service of services"><a (click)="onGetService(service)">{{service.name}}</a></li>
+      <li *ngFor="let service of services" (click)="onGetService(service)">
+        <img src="{{authSer.pathImg + service.photo}}" />
+        {{service.name}}
+      </li>
     </ul>
   </div>
   

src/styles.css

@@ -363,7 +363,8 @@ select.ng-invalid.ng-touched {
   }
 
   .activeLink {
-    color: #252525 !important;
+    color: #fff !important;
+    background-color: #007A71;
   }
 
   .spanReqired-w {