sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Changement la navigation à gauche

Browse Source
This commit is contained in:
Sébastien André
2021-04-14 12:18:16 +02:00
parent 41fac29b91
commit b00ae1618a
2 changed files with 60 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
Front/skydivelogs-app/src/app/app.component.html
View File

@@ -1,70 +1,55 @@
<header *ngIf="this.show()"> <mat-toolbar>
<div style="display: flex; justify-content: space-between;"> <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
<div> <h2>{{ title }}</h2>
<svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32"> </mat-toolbar>
<rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
transform="translate(31.5 58)"></rect>
<rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
transform="translate(31.5 44)"></rect>
<rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
transform="translate(31.5 30)"></rect>
</svg>
<h2 style="display: inline;">{{ title }}</h2>
</div>
</div>
<nav class="navigation" [ngClass]="{'side-menu-active': showMenu}"> <mat-sidenav-container>
<ul> <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px;">
<li> <mat-nav-list>
<mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon> <mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
<a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a> <a routerLink="/summary" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>Summary</a>
<hr class="splitter"> <hr class="splitter">
</li> </mat-nav-list>
<li> <mat-nav-list>
<mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon> <mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon>
<a routerLink="/jumps" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of <a routerLink="/jumps" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of jumps</a>
jumps</a> </mat-nav-list>
</li> <mat-nav-list>
<li> <mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
<mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon> <a routerLink="/newjump" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>Add a new jump</a>
<a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new <hr class="splitter">
jump</a> </mat-nav-list>
<hr class="splitter"> <mat-nav-list>
</li> <mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
<li> <a routerLink="/dzs" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of DZs</a>
<mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon> </mat-nav-list>
<a routerLink="/dzs" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of DZs</a> <mat-nav-list>
</li> <mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon>
<li> <a routerLink="/aircrafts" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of aircrafts</a>
<mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon> </mat-nav-list>
<a routerLink="/aircrafts" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of <mat-nav-list>
aircrafts</a> <mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon>
</li> <a routerLink="/jumpTypes" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of jump types</a>
<li> </mat-nav-list>
<mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon> <mat-nav-list>
<a routerLink="/jumpTypes" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of <mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon>
jump types</a> <a routerLink="/gears" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of gears</a>
</li> </mat-nav-list>
<li> <mat-nav-list *ngIf="currentUser">
<mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon> <hr class="splitter">
<a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
gears</a> <a routerLink="/user" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>
</li> {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
<li *ngIf="currentUser"> </a>
<hr class="splitter"> </mat-nav-list>
<mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon> <mat-nav-list *ngIf="currentUser">
<a routerLink="/user" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange> <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
{{ this.currentUser.firstName }} {{ this.currentUser.lastName }} <span (click)="logout()" style="cursor: pointer;">Logout</span>
</a> </mat-nav-list>
</li> </mat-sidenav>
<li *ngIf="currentUser">
<mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
<span (click)="logout()" style="cursor: pointer;">Logout</span>
</li>
</ul>
</nav>
</header>
<router-outlet></router-outlet> <mat-sidenav-content>
<router-outlet></router-outlet>
<footer style="text-align: right;">Web software to log your skydive jumps - v{{ version }} - @Séb</footer> <footer style="text-align: right;">Web software to log your skydive jumps - v{{ version }} - @Séb</footer>
</mat-sidenav-content>
</mat-sidenav-container>

8
Front/skydivelogs-app/src/app/app.module.ts
View File

@@ -53,6 +53,9 @@ import { MatTabsModule } from "@angular/material/tabs";
import { MatDialogModule } from "@angular/material/dialog"; import { MatDialogModule } from "@angular/material/dialog";
import { MatCardModule } from "@angular/material/card"; import { MatCardModule } from "@angular/material/card";
import { MatRadioModule } from "@angular/material/radio"; import { MatRadioModule } from "@angular/material/radio";
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { CachingInterceptor } from "../interceptor/caching.interceptor"; import { CachingInterceptor } from "../interceptor/caching.interceptor";
//import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor'; //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
@@ -163,7 +166,10 @@ export function initConfig(configService: ConfigurationHelper) {
MatTabsModule, MatTabsModule,
MatDialogModule, MatDialogModule,
MatCardModule, MatCardModule,
MatRadioModule MatRadioModule,
MatSidenavModule,
MatListModule,
MatToolbarModule
], ],
exports: [HttpClientModule], exports: [HttpClientModule],
providers: [ providers: [