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

<mat-toolbar class="topbar bg-primary">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">
            <span class="logo me-3">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Logo_Ad_Astra" x="0px" y="0px" width="218px" height="48px" viewBox="0 0 218 48" enable-background="new 0 0 218 48" xml:space="preserve">
                    <g id="Ad_Astra">
                        <g>
                            <polygon fill="#D7C067" points="66.158,26.352 64.543,20.319 54.508,20.319 52.896,26.352   "/>
                            <polygon fill="#D7C067" points="62.985,38.615 63.716,41.5 70.209,41.5 66.724,28.614 60.308,28.614 61.658,33.665 57.394,33.665     58.745,28.614 52.25,28.614 48.842,41.5 55.299,41.5 56.069,38.615   "/>
                        </g>
                        <g>
                            <path fill="#DDDCDB" d="M92.467,26.352v-1.212c0-1.325-0.508-2.472-1.51-3.409c-1.003-0.937-2.23-1.412-3.647-1.412H71.733v6.033    H92.467z"/>
                            <path fill="#DDDCDB" d="M92.467,28.614h-6.456v6.853H78.19v-6.853h-6.457V41.5H87.31c1.418,0,2.645-0.475,3.647-1.411    c1.002-0.938,1.51-2.083,1.51-3.409V28.614z"/>
                        </g>
                        <g>
                            <polygon fill="#D7C067" points="119.495,26.352 117.88,20.319 107.846,20.319 106.232,26.352   "/>
                            <polygon fill="#D7C067" points="116.322,38.615 117.053,41.5 123.546,41.5 120.061,28.614 113.644,28.614 114.995,33.665     110.73,33.665 112.081,28.614 105.588,28.614 102.179,41.5 108.635,41.5 109.406,38.615   "/>
                        </g>
                        <g>
                            <path fill="#DDDCDB" d="M145.803,33.434c0-1.324-0.508-2.471-1.509-3.408c-1.002-0.937-2.229-1.412-3.647-1.412h-15.571    c0.056,1.229,0.561,2.297,1.505,3.179c1.001,0.936,2.229,1.41,3.647,1.41h9.121v2.264H125.07V41.5h15.576    c1.418,0,2.645-0.475,3.647-1.411c1.001-0.938,1.509-2.083,1.509-3.409V33.434z"/>
                            <path fill="#DDDCDB" d="M125.07,26.352h20.732v-6.033h-15.575c-1.417,0-2.646,0.475-3.647,1.412    c-1.002,0.936-1.51,2.084-1.51,3.409V26.352z"/>
                        </g>
                        <g>
                            <rect x="155.362" y="28.614" fill="#DDDCDB" width="6.456" height="12.886"/>
                            <rect x="148.223" y="20.319" fill="#DDDCDB" width="20.733" height="6.033"/>
                        </g>
                        <g>
                            <path fill="#DDDCDB" d="M192.109,26.352v-1.212c0-1.325-0.508-2.472-1.51-3.409c-1.003-0.937-2.23-1.412-3.647-1.412h-15.576    v6.033H192.109z"/>
                            <path fill="#DDDCDB" d="M171.375,41.5h6.456v-8.296h7.823V41.5h6.456v-8.066c0-0.679-0.481-1.473-1.432-2.362l-0.174-0.163    l0.174-0.163c0.846-0.79,1.319-1.506,1.414-2.132h-20.716V41.5z"/>
                        </g>
                        <g>
                            <polygon fill="#DDDCDB" points="207.776,38.615 208.508,41.5 215,41.5 211.515,28.614 205.099,28.614 206.45,33.665     202.185,33.665 203.536,28.614 197.041,28.614 193.632,41.5 200.088,41.5 200.861,38.615   "/>
                            <polygon fill="#DDDCDB" points="210.948,26.352 209.335,20.319 199.3,20.319 197.686,26.352   "/>
                        </g>
                    </g>
                    <g id="Star">
                        <path fill-rule="evenodd" clip-rule="evenodd" fill="#DDDCDB" d="M67.011,15.14c-15.125-0.415-30.13,11.212-42.833,19.917   l5.321-16.303l2.163,5.883c0.43,1.075,0.917,0.809,2.133,0.276C45.682,19.162,51.53,13.062,67.011,15.14z"/>
                        <path fill="#D7C067" d="M21.111,39.24l8.584-6.51l9.078,9.012l-8.772-5.538L16.491,46l4.396-17.216L3,19.504l21.795,7.159   L21.111,39.24z"/>
                        <path fill="#D7C067" d="M25.738,23.656L7.23,18.529l16.482,1.101l2.655-8.707l2.032,5.081L25.738,23.656z"/>
                        <path fill="#D7C067" d="M28.784,3l6.61,15.685c0.112,0.257,0.211,0.435,0.442,0.326c9.763-4.918,17.872-12.196,41.689-4.196   c-25.071-5.188-30.394,2.068-43.894,8.159c-0.269,0.111-0.497-0.09-0.729-0.662L27.238,8.07L28.784,3z"/>
                    </g>
                </svg>
            </span>
        </a>
    </div>
    <button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
        <mat-icon fontIcon="menu"></mat-icon>
    </button>
    <span class="flex-spacer"></span>
    <ng-container *appShowAuthed="true">
        <div class="position-relative">
            <span [matMenuTriggerFor]="profile" class="fw-light me-1 pointer">
                &#64;{{ currentUser.username }}
            </span>
            <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>
                <mat-divider class="my-1"></mat-divider>
                <button mat-menu-item (click)="logout()">
                    <mat-icon fontIcon="logout" color="warn"></mat-icon> Se déconnecter
                </button>
            </mat-menu>
        </div>
    </ng-container>
    <ng-container *appShowAuthed="false">
        <span>
        <button mat-button routerLink="/login" routerLinkActive="active">Se connecter</button>
        <button mat-button routerLink="/register" routerLinkActive="active">Créer un compte</button>
        </span>
    </ng-container>
</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">
        <ng-container *appShowAuthed="true">
        <div class="user-profile">
            <div class="profile-text">
                <a [matMenuTriggerFor]="sdprofile" class="d-flex justify-content-end align-items-end">
                    <span>{{ currentUser.firstname }} {{ currentUser.lastname }}</span>
                    <mat-icon fontIcon="expand_more" class="ms-3 lh-sm"></mat-icon>
                </a>
            </div>
            <mat-menu #sdprofile="matMenu" class="rounded-0">
                <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>
                <mat-divider class="my-1"></mat-divider>
                <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>
        @for (menuitem of getMenuItems(); track menuitem) {
            <mat-list-item appAccordionLink routerLinkActive="selected" group="{{menuitem.state}}">
            @if (!menuitem.parent && menuitem.type === 'link') {
                <a appAccordionToggle [routerLink]="['/', menuitem.state]">
                    @if (menuitem.icontype === 'mat') {
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 me-2"></mat-icon>
                    }
                    @else {
                        <i class="icosvg-{{menuitem.icon}} fs-3 mt-0 me-3"></i>
                    }
                    <span>{{ menuitem.name }}</span>
                    <span class="flex-spacer"></span>
                    @for (badge of menuitem.badge; track badge) {
                    <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false"></span>
                    }
                </a>
            }
            @if (menuitem.type === 'menu') {
                <a role="button" aria-hidden="true" (click)="toggleShowMenu(menuitem.state)" (keyup)="true">
                    @if (menuitem.icontype === 'mat') {
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 me-2"></mat-icon>
                    }
                    @else {
                        <i class="icosvg-{{menuitem.icon}} fs-3 mt-0 me-3"></i>
                    }
                    <span>{{ menuitem.name }}</span>
                    <span class="flex-spacer"></span>
                    @for (badge of menuitem.badge; track badge) {
                    <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false"></span>
                    }
                </a>
            }
            </mat-list-item>
            @if (menuitem.type === 'menu') {
                @for (submenuitem of getMenuItems(); track submenuitem) {
                    @if ( isVisibleMenu(menuitem.state) === true && submenuitem.parent === menuitem.state && submenuitem.type === 'link') {
                        <mat-list-item appAccordionLink routerLinkActive="selected" group="{{ submenuitem.state}}">
                            <a class="ps-4" appAccordionToggle [routerLink]="['/' + submenuitem.parent, submenuitem.state]">
                                @if (menuitem.icontype === 'mat') {
                                    <mat-icon [fontIcon]="submenuitem.icon" class="mt-0 me-2"></mat-icon>
                                }
                                @else {
                                    <i class="icosvg-{{submenuitem.icon}} fs-2 mt-0 me-2"></i>
                                }
                                <span>{{ submenuitem.name }}</span>
                                <span class="flex-spacer"></span>
                            </a>
                        </mat-list-item>
                    }
                }
            }
        }
        </mat-nav-list>
        </ng-container>
        <ng-container *appShowAuthed="false">
        <div class="user-profile">
            <!-- <div class="profile-img"> <img src="/assets/images/avatars/default.jpg" alt="user"> </div> -->
        </div>
        <mat-nav-list appAccordion>
            @for (menuitem of menuItems.getMenuAuth(); track menuitem) {
            <mat-list-item appAccordionLink routerLinkActive="selected" group="{{menuitem.state}}">
                @if (menuitem.type === 'link') {
                <a appAccordionToggle [routerLink]="['/', menuitem.state]">
                    @if (menuitem.icontype === 'mat') {
                        <mat-icon [fontIcon]="menuitem.icon" class="mt-0 me-2"></mat-icon>
                    }
                    @else {
                        <i class="icosvg-{{menuitem.icon}} fs-2 mt-0 me-2"></i>
                    }
                    <span>{{ menuitem.name }}</span>
                    <span class="flex-spacer"></span>
                    @for (badge of menuitem.badge; track badge) {
                    <span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false"></span>
                    }
                </a>
                }
            </mat-list-item>
            }
        </mat-nav-list>
        </ng-container>
        <app-layout-footer></app-layout-footer>
    </mat-sidenav>
    <mat-sidenav-content class="page-wrapper">
        <!--<div class="page-content">-->
        <router-outlet><!--<app-spinner></app-spinner>--></router-outlet>
        <!--</div>-->
    </mat-sidenav-content>
</mat-sidenav-container>