matsen-tool-fe/matsen-tool/src/app/app.component.html

<!-- nav -->
<nav class="navbar navbar-expand navbar-primary bg-primary px-3" *ngIf="user">
    <div class="container-fluid">
        <div class="navbar-nav">
            <a class="nav-item nav-link" routerLink="/" routerLinkActive="active"
               [routerLinkActiveOptions]="{exact: true}">
                <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94"
                     alt="{{'basic.company-name' | translate}}"/>
            </a>
        </div>
        <div class="navbar-nav align-items-center">
            <button (click)="copyTokenToClipboard()">Copy Token</button>
            <div class="pe-2 me-4 position-relative" data-bs-toggle="dropdown">Benachrichtigungen
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                    99+
                </span>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#">Fesago: Jan antwortete auf Deinen Beitrag</a></li>
                    <li><a class="dropdown-item" href="#">Matsen: Peter antwortete auf Deinen Beitrag</a></li>
                    <li><a class="dropdown-item" href="#">spawntree: Du hast eine neue Aufgabe erhalten</a></li>
                    <li><a class="dropdown-item" href="#">Peter Matusik: Christian hat einen Kommentar verfasst</a></li>
                </ul>
            </div>
            <button class="btn btn-link nav-item nav-link" (click)="logout()">{{ 'basic.logout' | translate }}</button>
        </div>
    </div>
</nav>

<!-- main app container -->
<div class="app-container" [ngClass]="{ 'bg-light': user }">
    <alert></alert>
    <router-outlet></router-outlet>
</div>