headup_app/src/app/components/shared/layout/full.component.html

<mat-toolbar color="primary" class="topbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="index.html">
            <span>
                <img src="assets/images/logo-light-icon.svg" alt="homepage" class="light-logo">
            </span>
            <span>
                <img src="assets/images/logo-light-text.svg" alt="homepage" class="light-logo">
            </span>
        </a>
    </div>
    <button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
        <mat-icon fontIcon="menu"></mat-icon>
    </button>
    <span class="flex-spacer"></span>
    <span *appShowAuthed="true" class="fw-light me-1">@{{ currentUser.username }}</span>
    <div *appShowAuthed="true" class="position-relative">
        <button [matMenuTriggerFor]="profile" mat-icon-button>
            <img [src]="currentUser.image" alt="user" class="profile-pic">
        </button>
        <mat-menu #profile="matMenu">
            <button mat-menu-item [routerLink]="['/profile', currentUser.username]" routerLinkActive="active">
                <mat-icon fontIcon="account_circle" color="primary"></mat-icon> Mon compte
            </button>
            <button mat-menu-item routerLink="/settings" routerLinkActive="active">
                <mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
            </button>
            <button mat-menu-item (click)="goToGitHub()">
                <mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
            </button>
            <button mat-menu-item>
                <mat-icon fontIcon="notifications_off" color="primary"></mat-icon> Désactiver les notifications
            </button>
            <hr class="my-0" />
            <button mat-menu-item (click)="logout()">
                <mat-icon fontIcon="logout" color="warn"></mat-icon> Se déconnecter
            </button>
        </mat-menu>
    </div>
    <span *appShowAuthed="false">
        <button mat-button routerLink="/login" routerLinkActive="active">Se connecter</button>
        <button mat-button routerLink="/register" routerLinkActive="active">Créer un compte</button>
    </span>
</mat-toolbar>
<mat-sidenav-container class="app-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 0 : 0">
    <mat-sidenav #snav id="snav" class="dark-sidebar pl-xs" [mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" [opened]="mobileQuery.matches" [disableClose]="mobileQuery.matches"  >
        <div *appShowAuthed="true">
            <div class="user-profile" style="background-image: url('{{ currentUser.bg_image }}');">
                <div class="profile-img"> <img [src]="currentUser.image" alt="user"> </div>
                <div class="profile-text">
                    <a [matMenuTriggerFor]="sdprofile"> {{ currentUser.firstname }} {{ currentUser.lastname }} <mat-icon fontIcon="expand_more" class="ms-5"></mat-icon></a>
                </div>
                <mat-menu #sdprofile="matMenu">
                    <button mat-menu-item [routerLink]="['/profile', currentUser.username]" routerLinkActive="active">
                        <mat-icon fontIcon="account_box" color="primary"></mat-icon> Mon compte
                    </button>
                    <button mat-menu-item routerLink="/settings" routerLinkActive="active">
                        <mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
                    </button>
                    <button mat-menu-item>
                        <mat-icon fontIcon="notifications_off" color="primary"></mat-icon> Désactiver les notifications
                    </button>
                    <hr class="my-0" />
                    <button mat-menu-item (click)="logout()">
                        <mat-icon fontIcon="exit_to_app" color="warn"></mat-icon> Se déconnecter
                    </button>
                </mat-menu>
            </div>
            <mat-nav-list appAccordion>
                <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getMenuItems()" routerLinkActive="selected" group="{{menuitem.state}}">
                    <a appAccordionToggle [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                        <span class="flex-spacer"></span>
                        <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
                    </a>
                    <a (click)="showQCMMenu = !showQCMMenu" *ngIf="menuitem.type === 'menu'">
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                        <span class="flex-spacer"></span>
                        <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
                    </a>
                </mat-list-item>
                <div *ngIf="showQCMMenu">
                    <mat-list-item appAccordionLink *ngFor="let menuqcm of menuItems.getMenuQCM()" routerLinkActive="selected" group="{{ menuqcm.state}}">
                        <a class="ps-4" appAccordionToggle [routerLink]="['/', menuqcm.state]" *ngIf=" menuqcm.type === 'link'">
                            <mat-icon [fontIcon]="menuqcm.icon" class="mt-0 mr-2"></mat-icon>
                            <span>{{ menuqcm.name }}</span>
                            <span class="flex-spacer"></span>
                        </a>
                    </mat-list-item>
                </div>
            </mat-nav-list>
        </div>
        <div *appShowAuthed="false">
            <div class="user-profile">
                <!-- <div class="profile-img"> <img src="/assets/images/users/user.jpg" alt="user"> </div> -->
            </div>
            <mat-nav-list appAccordion>
                <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getMenuAuth()" routerLinkActive="selected" group="{{menuitem.state}}">
                    <a appAccordionToggle [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                        <span class="flex-spacer"></span>
                        <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
                    </a>
                    <a (click)="showQCMMenu = !showQCMMenu" *ngIf="menuitem.type === 'menu'">
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                        <span class="flex-spacer"></span>
                        <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
                    </a>
                </mat-list-item>
                <div *ngIf="showQCMMenu">
                    <mat-list-item appAccordionLink *ngFor="let menuqcm of menuItems.getMenuQCM()" routerLinkActive="selected" group="{{ menuqcm.state}}">
                        <a class="ps-4" appAccordionToggle [routerLink]="['/', menuqcm.state]" *ngIf=" menuqcm.type === 'link'">
                            <mat-icon [fontIcon]="menuqcm.icon" class="mt-0 mr-2"></mat-icon>
                            <span>{{ menuqcm.name }}</span>
                            <span class="flex-spacer"></span>
                        </a>
                    </mat-list-item>
                </div>
            </mat-nav-list>
        </div>
        <footer class="footer">
            <div class="container-fluid text-end">
                <a class="me-1" [href]="siteLink" target="_blank">{{ author }}</a>
                <span class="copyright">
                    &copy; {{ today | date: 'yyyy' }}
                </span>
            </div>
        </footer>
    </mat-sidenav>
    <mat-sidenav-content class="page-wrapper">
        <div class="page-content">
            <router-outlet><huapp-spinner></huapp-spinner></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>