src/app/layouts/header/HeaderComponent.html

<!--
Copyright 2020 TATA ELXSI

Licensed under the Apache License, Version 2.0 (the 'License');
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-->
<span class="d-none px-3 py-2 text-center text-bold bg-primary text-white">Here is a newer {{'APPVERSION' | translate}} {{PACKAGEVERSION}}
    of OSM!</span>

<nav class="navbar navbar-expand-md sticky-top bg-white" role="navigation">
    <a class="navbar-brand">
        <img routerLink="/" src="assets/images/logo.png" class="osm-logo"
            alt="OPEN SOURCE MANO" draggable="false">
    </a>
    <div class="nav navbar-nav nav-flex-icons ml-auto">
        <ul class="navbar-nav cursor-pointer" ngbDropdown display="dynamic" placement="bottom-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownProject" ngbDropdownToggle>
                    <i class="fas fa-folder-open"></i> {{'PAGE.DASHBOARD.PROJECTS' | translate}}
                    ({{selectedProject | async}})
                </a>
                <div class="dropdown-menu custom-dropdown-menu m-0 p-0" ngbDropdownMenu *ngIf="getSelectedProject"
                    aria-labelledby="navbarDropdownProject">
                    <a ngbDropdownItem class="dropdown-item project-item"
                        [ngClass]="list.project_name === getSelectedProject ? 'activeProject' : ''"
                        (click)="list.project_name === getSelectedProject ? '' : this.projectService.switchProjectModal(list)"
                        *ngFor="let list of projectList$ | async" placement="left" container="body"
                        ngbTooltip="{{ (list.project_name === getSelectedProject ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
                        <span>{{list.project_name}}</span>
                        <i *ngIf="list.project_name === getSelectedProject"
                            class="fas fa-check-circle text-success"></i>
                        <i *ngIf="list.project_name !== getSelectedProject" class="fas fa-exchange-alt text-danger"></i>
                    </a>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav cursor-pointer text-right" ngbDropdown display="dynamic" placement="bottom-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
                    <i class="fas fa-user-circle"></i> {{'USER' | translate}} ({{username$ | async}})
                </a>
                <div class="dropdown-menu custom-dropdown-menu m-0 p-0" ngbDropdownMenu
                    aria-labelledby="navbarDropdown">
                    <a ngbDropdownItem class="dropdown-item project-item" (click)="userSettings()">
                        <span>{{'PAGE.DASHBOARD.USERSETTINGS' | translate}}</span>
                        <i class="fas fa-users-cog"></i>
                    </a>
                    <a ngbDropdownItem class="dropdown-item project-item" (click)="logout()">
                        <span>{{'PAGE.DASHBOARD.LOGOUT' | translate}}</span>
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                    <div class="custom-divider"></div>
                    <a *ngIf="sharedService.osmVersion" ngbDropdownItem class="dropdown-item project-item osm-version" href="javascript:void(0);">
                        <span>{{'OSMVERSION' | translate}} {{sharedService.osmVersion}}</span>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</nav>