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

<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
    <div class="internalHeader-w"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <div class="container">
            <div class="row">
                <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
                    <div class="notificationDiv-w">
                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
                          <li class="profileData-w">
                            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                <button class="buttonW" ngbDropdownToggle>
                                    <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
                                        {{ authSer.dataLoginUser['name'] }} 
                                </button>
                  
                            <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>

                                <button class="dropdown-item" style="cursor: pointer;" >
                                <i class="fas fa-bell"></i>
                                <span>الاشعارات</span>
                                </button>
                                <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
                                    <i class="fas fa-user-alt"></i>
                                    <span>ملفي</span>
                                </button>
                                <button class="dropdown-item" style="cursor: pointer;" >
                                <i class="fas fa-sticky-note"></i>
                                <span>ملاحظاتي</span>
                                </button>
                                <button class="dropdown-item" style="cursor: pointer;" >
                                <i class="fas fa-tasks"></i>
                                <span>مهامي</span>
                                </button>
                                 <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
                                    <i class="fas fa-solar-panel"></i>
                                    <span>لوحة التحكم</span>
                                </button>
                                <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
                                    <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
                                    <span>خروج</span>
                                </button>
                            </div>
                         </div>
                      </li>
                      </ul>
                      </div>
                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">تسجيل دخول </a></p>
                </div>
                <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
                        <input type="text" placeholder="أبحث"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-none d-sm-none d-md-block d-lg-block leftText">
                    <p class="dateW"> {{currentDate}}</p>
                    <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-2 col-sm-2 col-md-4 col-lg-4 d-md-none d-lg-none leftText">
                    <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>

    <div class="logoHeader-w">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="rightLogo-w">
                        <a href="./"><img src="../../assets/image/logo1.png" alt="logo" title="logo" /></a>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="center text-center">
                    <h2>المنصه الداخليه</h2>
                    <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
                </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-4 hidden-xs">
                <div class="leftLogo-w">
                    <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
                </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pagesHeader-w">
        <div class="container">
            <div class="row">
                <div class="navbar" style="padding:0">
                    <!-- start navbar mobile -->
                    <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
                        <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" ngbDropdownToggle style="color:#61a59b"><i class="fas fa-bars"></i></button>
                        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
                            <button class="dropdown-item activeInternalHeader-w" (click)="goToHome()"> <a href="/home"> الرئيسيه</a></button>
                            <div *ngFor="let parent of authSer.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>
                                </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>
                                    <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 #e4e4e4">
                                                    <a href="{{child.link}}"> {{child.name}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end navbar mobile -->

                    <!-- start large screen navbar -->

                    <button class="dropbtn d-none d-sm-none d-md-none d-lg-block homeBtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D;height: 100%" [ngClass]="{'homeActive': authSer.homeActivate}">
                        <a style="cursor: pointer; font-size:18px; font-weight:bold">   <i class="fa fa-home" style="font-size: 30px;margin:0 5px;"></i> <span class="parentName-w"> الرئيسيه</span></a>
                    </button>
                    <div *ngFor="let parent of authSer.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" [ngClass]="parent.active == 0 ? '' : 'activeLink' ">
                            <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" [ngClass]="parent.active == 0 ? '' : 'activeInternalHeader'" (click)="getData(parent)">
                            <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span>
                                <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                            </a>
                            <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                        </button>
                        <div class="dropdown-content arar" style="right:0px;" *ngIf="parent['childs'].length > 0">
                            <div class="row">
                                <div *ngFor="let child of parent['childs']" style="width:100%;margin-right: 15px;margin-left: 15px;">
                                    <ul class="list-unstyled">
                                        <li >
                                            <a href="{{child.link}}"> {{child.name}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end large screen navbar -->
                </div>
            </div>
        </div>
    </div>
</ng-template>



<ng-template #englishTemplate>
    <div class="internalHeader-w">
        <div class="container">
            <div class="row">
                <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
                    <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
                        <li class="profileData-w">
                            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt=" " /> {{authSer.dataLoginUser['name']}} </button>
                                <div class="dropdown-menu en_" style="text-align:left" ngbDropdownMenu>
									 <button class="dropdown-item" style="cursor: pointer;" >
										<i class="fas fa-bell"></i>
										 <span>Notifications</span>
									</button>
									<!-- <button class="dropdown-item" style="cursor: pointer;" >
										 <i class="fas fa-comments"></i>
										 <span>رسائل</span>
									</button> -->
                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
										<i class="fas fa-user-alt"></i>
										 <span>Profile</span>
									</button>
									<button class="dropdown-item" style="cursor: pointer;" >
										 <i class="fas fa-sticky-note"></i>
										 <span>Notes</span>
									</button>
									<button class="dropdown-item" style="cursor: pointer;" >
										 <i class="fas fa-tasks"></i>
										 <span>Tasks</span>
									</button>
                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
										<i class="fas fa-solar-panel"></i>
										<span>DashBoard</span>
									</button>
                                    <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
										<i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
										<span>Log Out</span>
									</button>
									
                                   <!-- <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">Profile</button>
                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> DashBoard</button>
                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">Log Out</button> -->
                                </div>
                            </div>
                        </li>
                        <!-- <li><span><i class="fas fa-comments"></i></span></li>
                        <li><span><i class="fas fa-bell"></i></span></li> -->
                    </ul>
                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">LOG IN</a></p>
                </div>
                <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
                        <input type="text" placeholder="search" style=" text-align:left"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4  d-none d-sm-none d-md-block d-lg-block leftText">
                    <p class="dateW"> {{currentEnglishDate | date:'fullDate'}} </p>
                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer.arabicLanguage}" *ngIf="authSer.showArabicIcon">عربي</span>
                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-md-none d-lg-none leftText">
                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer.arabicLanguage}" *ngIf="authSer.showArabicIcon">عربي</span>
                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                </div>
            </div>
        </div>
    </div>

    <div class="logoHeader-w">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="rightLogo-w">
                        <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:-15px"/>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                <div class="center text-center">
                    <h2> Internal Page</h2>
                    <p>King Faisal Medical Complex in Taif</p>
                </div>
                </div>
                <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
                <div class="leftLogo-w">
                    <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
                </div>
                </div>
            </div>
        </div>
    </div>

     <div class="pagesHeader-w">
        <div class="container">
            <div class="row">
                <div class="navbar">
                    <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
                        <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" style="color:#61a59b" 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' " [ngClass]="{'homeActive': authSer.homeActivate}">  Home</button>
                            <div *ngFor="let parent of authSer.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 enen" style="left:0px;" *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>
                                                    <a href="{{child.link}}"> {{child.name_en}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div *ngFor="let parent of authSer.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">
                            <a href="{{parent.link}}" style="text-decoration:none">
                                <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" [className]=" arabicTemplate ? '' : 'activeLanguageIcon' " />
                                <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 enen" *ngIf="parent['childs'].length > 0">
                            <ul class="list-unstyled">
                                <li  *ngFor="let child of parent['childs']" [className]="arabicTemplate ? '' : 'menuEnglish' ">
                                    <a href="{{child.link}}"> {{child.name_en}}</a>
                                </li>
                            </ul>
                        </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">Home</span> <i class="fa fa-home" style="font-size: 30px;margin:0 5px;"></i></a>
                    </button>
                </div>
            </div>
        </div>
    </div>
</ng-template>