client-app/src/app/common/secured-header/secured-header.component.html

<nav class="navbar">
    <div class="navbar-brand">
        <img *ngIf="logoUrl" [src]="logoUrl" alt="App Logo" class="logo">
        <!-- <span class="app-title">USCIB Carnet Portal</span> -->
    </div>

    <div class="navbar-menu">
        <button mat-button (click)="navigateTo('home')">Home</button>
       
        <div class="profile-container">
            <button mat-icon-button (click)="toggleProfileMenu()" class="profile-button">
                <mat-icon>account_circle</mat-icon>
            </button>

            <div class="profile-menu" *ngIf="showProfileMenu">
                <div class="profile-info">
                    <mat-icon>email</mat-icon>
                    <span>{{ userEmail }}</span>
                </div>

                <button mat-menu-item (click)="navigateTo('usersettings')">
                    <mat-icon>settings</mat-icon>
                    <span>User Preferences</span>
                </button>

                <button mat-menu-item (click)="logout()">
                    <mat-icon>logout</mat-icon>
                    <span>Logout</span>
                </button>
            </div>
        </div>
    </div>
</nav>