SAMPracticantes/sistema-mantenimiento-front/src/app/components/template/template.component.html

<mat-toolbar class="toolbar" (window:resize)="onResize()">
    <mat-toolbar-row class="p-0">
        <div class="toolbar-row">
            <div class="menu-items">
                <h1 style="color: #e0e0e0; margin: 0;">{{ title }}</h1>
                <div class="example-spacer">
                    <div *ngIf="maintenanceActivated" class="time-counter">
                        {{ timeLeft }}
                    </div>
                </div>
                <button mat-button class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode"
                    (click)="modulesActivated = !modulesActivated">
                    <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> MÓDULOS
                </button>
                <button mat-button [matMenuTriggerFor]="menuA" class="white_font animated fadeIn"
                    *ngIf="!isLoading && !maintenanceMode">
                    <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> {{ userName }}
                </button>
                <mat-menu #menuA="matMenu">
                    <button mat-menu-item><mat-icon>person</mat-icon> Mi perfil</button>
                    <button mat-menu-item><mat-icon>help</mat-icon> Ayuda</button>
                    <button mat-menu-item><mat-icon>key</mat-icon> Cambiar contraseña</button>
                    <button mat-menu-item (click)="logoutTemp()"><mat-icon>logout</mat-icon> Cerrar sesión</button>
                </mat-menu>
                <span class="m-8"></span>
                <div class="search-mat-form-field animated fadeIn" *ngIf="!isLoading && !maintenanceMode">
                    <mat-icon class="prefix">search</mat-icon>
                    <input type="text" class="input" placeholder="Buscar ubicaciones, archivos, etc..." #input>
                    <button mat-icon-button [disabled]="input.value === ''">
                        <mat-icon class="suffix">close</mat-icon>
                    </button>
                </div>
            </div>
            <div class="icon-modules-container" [ngClass]="{
                hidden: !modulesActivated, animate_hide: modulesActivated
            }">
                <div class="row-container">
                    <div class="row-item" *ngFor="let item of menuItems" (click)="navigate(item.IDMODULO)">
                        <mat-icon>{{ item.ICONOMODULO }}</mat-icon>
                        <p>{{ item.NOMBREMODULO }}</p>
                    </div>
                </div>
            </div>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

<footer style="height: 48px;"></footer>