navbar.component.html

<nav class="navbar navbar-light bg-light navbar-expand-md fixed-top border-bottom">
    <!-- Logo -->
    <a *ngIf="!instance" href="{{ baseHref }}" class="navbar-brand">
        <img src="assets/cesam_anis40.png" alt="ANIS logo" />
    </a>

    <a *ngIf="instance" routerLink="/instance/{{ instance.name }}" class="navbar-brand">
        <img src="{{ getLogoHref() }}" alt="Instance logo" />
    </a>

    <!-- Right Navigation -->
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li *ngFor="let link of links" class="nav-item pr-3">
                <a class="nav-link" [routerLink]="link.routerLink" routerLinkActive="active">
                    <span [ngClass]="link.icon"></span> {{ link.label }}
                </a>
            </li>
        </ul>
        <button *ngIf="authenticationEnabled && !isAuthenticated"
            class="btn btn-outline-success my-2 my-sm-0"
            id="button-sign-in"
            (click)="login.emit()">
            Sign In / Register
        </button>
        <span *ngIf="isAuthenticated" id="dropdown-menu" dropdown>
            <button id="button-basic" dropdownToggle type="button" class="btn btn-light" aria-controls="dropdown-basic">
                <span class="fa-stack" [ngStyle]="{ color: instance ? instance.config.design.design_color : '#7AC29A' }">
                    <span class="fas fa-circle fa-2x"></span>
                    <span class="fas fa-user fa-stack-1x fa-inverse"></span>
                </span>
                &nbsp;
                <span class="fas fa-chevron-down text-secondary"></span>
            </button>
            <ul id="basic-link-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-up" role="menu" aria-labelledby="basic-link">
                <li id="li-email" role="menuitem">
                    <span class="dropdown-item font-italic">{{ userProfile.email }}</span>
                </li>
                <li class="divider dropdown-divider"></li>
                <li role="menuitem">
                    <a class="dropdown-item pointer" (click)="openEditProfile.emit()">
                        <span class="fas fa-id-card"></span> Edit profile
                    </a>
                </li>
                <li class="divider dropdown-divider"></li>
                <li role="menuitem">
                    <a class="dropdown-item text-danger pointer" (click)="logout.emit()">
                        <span class="fas fa-sign-out-alt fa-fw"></span> Sign Out
                    </a>
                </li>
            </ul>
        </span>
    </div>

    <!-- Dropdown appearing on mobile only -->
    <span dropdown>
        <button id="button-basic" dropdownToggle type="button" class="navbar-toggler" aria-controls="dropdown-basic">
            <span class="fas fa-bars"></span>
        </button>
        <ul id="basic-link-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-up" role="menu"
            aria-labelledby="basic-link">
            <li *ngIf="isAuthenticated" role="menuitem">
                <span class="dropdown-item font-italic">{{ userProfile.email }}</span>
            </li>
            <li *ngIf="isAuthenticated" class="divider dropdown-divider"></li>
            <li *ngFor="let link of links" role="menuitem">
                <a class="dropdown-item" [routerLink]="link.routerLink">
                    <span [ngClass]="link.icon" class="fa-fw"></span> {{ link.label }}
                </a>
            </li>
            <li *ngIf="isAuthenticated" class="divider dropdown-divider"></li>
            <li *ngIf="isAuthenticated" role="menuitem">
                <a class="dropdown-item pointer" (click)="openEditProfile.emit()">
                    <span class="fas fa-id-card"></span> Edit profile
                </a>
            </li>
            <li *ngIf="authenticationEnabled" class="divider dropdown-divider"></li>
            <li *ngIf="authenticationEnabled && !isAuthenticated" role="menuitem">
                <a class="dropdown-item pointer text-success" (click)="login.emit()">
                    <span class="fas fa-sign-in-alt fa-fw"></span> Sign In / Register
                </a>
            </li>
            <li *ngIf="isAuthenticated" role="menuitem">
                <a class="dropdown-item pointer text-danger" (click)="logout.emit()">
                    <span class="fas fa-sign-out-alt fa-fw"></span> Sign Out
                </a>
            </li>
        </ul>
    </span>
</nav>