ameloriation du style de la partie user

This commit is contained in:
MiharyR 2021-11-24 21:34:27 +01:00
parent 1e5b9bd49c
commit cd1f323686
26 changed files with 333 additions and 85 deletions

View file

@ -6,27 +6,33 @@
<span class="navbar-toggler-icon"></span>
</button>
<!-- [Recherche] [Mes Playlists] [Historique] -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/user/search"> Rechercher </a>
<a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Rechercher</a>
<a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Rechercher</a>
</li>
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
<a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Mes playlists</a>
<a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Mes playlists</a>
</li>
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/user/history"> Historique </a>
<a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Historique</a>
<a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Historique</a>
</li>
</ul>
</div>
<!-- Mon profil -->
<img [src]=urlImage
onerror="this.onerror=null; this.src='assets/profil.png'"
routerLink="/user/myProfil"
[routerLink]="routes[4]"
alt="">
<!-- Deconnexion -->
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
Deconnexion

View file

@ -1,6 +1,6 @@
.navbar {
background-color: black;
height: 50px;
height: 60px;
font-size: medium;
color: white;
}
@ -23,16 +23,22 @@
}
// Recherche, Mes Playlists, Historique
.monLi {
margin: 0px 10px 0px 10px;
}
.nav-link {
color: white;
}
.nav-link:hover {
color: grey;
}
.myActiveLink {
text-decoration: underline;
}
// Bonton deconnexion
.btnDeconnexion {
font-size: medium;
margin: 0px 10px 0px 10px
@ -42,11 +48,6 @@
}
.monLi {
margin: 0px 10px 0px 10px;
}
img {
border: solid 2px white;
border-radius: 50px;

View file

@ -1,4 +1,5 @@
import {Component} from '@angular/core';
import {Router} from "@angular/router";
@ -9,9 +10,19 @@ import {Component} from '@angular/core';
})
export class NavbarUserComponent
{
routes: string[] = [
"/user", // 0
"/user/search", // 1
"/user/myPlaylists", // 2
"/user/history", // 3
"/user/myProfil" // 4
];
url = this.router.url;
urlImage: string = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
constructor() { }
constructor(private router: Router) { }
onDeconnexion(): void {}
}