amélioration style et navigation

src/app/app.component.html

@@ -1,15 +1,18 @@
 <div class="main-container" [ngClass]="{'flex': !isMobileDisplay}">
   <div class="flex column left-menu" *ngIf="!isMobileDisplay">
     <div class="header"> DRUMS<br> PATTERN<br> LIBRARY</div>
-      <div class="flex menu genre">
-        <h2>1 - Choisir un genre</h2>
-        <div class="button pointer" *ngFor="let genre of musicGenres; let i = index;" (click)="selectGenre(i)" [ngClass]="{'selected':i==selectedGenreIndex}">{{ genre.label }}</div>
+    <div class="flex menu genre mt-40">
+      <h2>1 - Choisir un genre</h2>
+      <div class="button pointer" *ngFor="let genre of musicGenres; let i = index;" (click)="selectGenre(i)"
+           [ngClass]="{'selected':i==selectedGenreIndex}">{{ genre.label }}
       </div>
-      <div class="flex menu">
-        <h2>2 - Choisir un sous-genre</h2>
-        <div class="button pointer" [routerLink]="subgenre.link"
-           *ngFor="let subgenre of musicGenres[selectedGenreIndex].subGenres; let i = index;" (click)="selectSubGenre(i)" [ngClass]="{'selected':i==selectedSubGenreIndex}">{{ subgenre.label }}</div>
+    </div>
+    <div class="flex menu mt-40">
+      <h2>2 - Choisir un sous-genre</h2>
+      <div class="button pointer" *ngFor="let subgenre of musicGenres[selectedGenreIndex].subGenres; let i = index;"
+           (click)="selectSubGenre(i)" [ngClass]="{'selected':i==selectedSubGenreIndex}">{{ subgenre.label }}
       </div>
+    </div>
   </div>
   <div *ngIf="isMobileDisplay">
     <div class="header-mobile">DRUMS PATTERN LIBRARY</div>

src/app/app.component.scss

@@ -1,6 +1,13 @@
+.main-container {
+  height: 100%;
+}
+
 .flex {
   display: flex;
-  height: 100%;
+}
+
+.mt-40 {
+  margin-top: 40px;
 }
 
 .menu {
@@ -12,15 +19,19 @@
     justify-content: flex-end;
   }
 
-  .button{
+  .button {
     border-radius: 5px;
     width: 90%;
     padding: 5px;
 
-    &.selected{
+    &.selected {
       background-color: black;
       color: white;
     }
+
+    &:hover:not(.selected) {
+      background-color: #cecece;
+    }
   }
 }
 

src/app/app.component.ts

@@ -1,7 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {Subgenre} from "./models/subgenre";
-import {Genre} from "./models/genre";
+import {Subgenre} from './models/subgenre';
+import {Genre} from './models/genre';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -13,28 +14,27 @@
   selectedGenreIndex: number = 0;
   selectedSubGenreIndex: number = 0;
   musicGenres: Genre[] = [
-    new Genre("Metal",
+    new Genre('Metal',
       [
-        new Subgenre("Metal", "/metal"),
-        new Subgenre("Rock", "/rock"),
-        new Subgenre("Rock variation", "/rock-variation"),
-        new Subgenre("Half time groove", "/half-time-groove"),
+        new Subgenre('Metal', '/metal'),
+        new Subgenre('Rock', '/rock'),
+        new Subgenre('Rock variation', '/rock-variation'),
+        new Subgenre('Half time groove', '/half-time-groove'),
       ]),
-    new Genre("Techno", [
-      new Subgenre("Basique", "/techno"),
+    new Genre('Techno', [
+      new Subgenre('Basique', '/techno'),
     ]),
-    new Genre("Garage", [
-      new Subgenre("Drum & Bass", "/drum-n-bass"),
-      new Subgenre("Garage - 2 step", "/garage"),
+    new Genre('Garage', [
+      new Subgenre('Drum & Bass', '/drum-n-bass'),
+      new Subgenre('Garage - 2 step', '/garage'),
     ]),
-    new Genre("Trance", [
-      new Subgenre("Psytrance", "/psytrance"),
+    new Genre('Trance', [
+      new Subgenre('Psytrance', '/psytrance'),
     ])
   ];
 
 
-
-  constructor(private responsive: BreakpointObserver) {
+  constructor(private responsive: BreakpointObserver, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -48,9 +48,13 @@
 
   selectGenre(i: number) {
     this.selectedGenreIndex = i;
+    this.router.navigate([this.musicGenres[this.selectedGenreIndex].subGenres[0].link]).then(r => {
+    });
   }
 
   selectSubGenre(i: number) {
     this.selectedSubGenreIndex = i;
+    this.router.navigate([this.musicGenres[this.selectedGenreIndex].subGenres[this.selectedSubGenreIndex].link]).then(r => {
+    });
   }
 }