ameloriation du style de la partie user
This commit is contained in:
parent
1e5b9bd49c
commit
cd1f323686
26 changed files with 333 additions and 85 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue