Amélioration navigation

src/app/app.component.html

@@ -1,14 +1,24 @@
 <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">
-      <a class="button" [routerLink]="link.link" *ngFor="let link of links">{{ link.label }}</a>
-    </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>
+      <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>
   <div *ngIf="isMobileDisplay">
     <div class="header-mobile">DRUMS PATTERN LIBRARY</div>
     <div class="flex mobile-menu">
-      <a class="item" [routerLink]="link.link" *ngFor="let link of links">{{ link.label }}</a>
+      <a class="item" *ngFor="let genre of musicGenres; let i = index" (click)="selectGenre(i)">{{ genre.label }}</a>
+    </div>
+    <div class="flex mobile-menu">
+      <a class="item" [routerLink]="subGenre.link"
+         *ngFor="let subGenre of musicGenres[selectedGenreIndex].subGenres">{{ subGenre.label }}</a>
     </div>
   </div>
   <div class="content">

src/app/app.component.scss

@@ -1,33 +1,48 @@
-.flex{
+.flex {
   display: flex;
   height: 100%;
 }
 
-.menu{
+.menu {
   flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  text-align: right;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  &.genre {
+    justify-content: flex-end;
+  }
+
+  .button{
+    border-radius: 5px;
+    width: 90%;
+    padding: 5px;
+
+    &.selected{
+      background-color: black;
+      color: white;
+    }
+  }
 }
 
-.content{
+.content {
   width: 100%;
 }
 
 .header {
-  width: 140px;
+  width: 240px;
   font-size: 30px;
 }
 
-.column{
+.column {
   flex-direction: column;
 }
 
 .left-menu {
   border-right: solid 1px black;
+  padding: 10px;
 }
 
-.nowrap{
+.nowrap {
   white-space: nowrap;
 }
 
@@ -36,11 +51,7 @@
   overflow-x: auto;
   gap: 5px;
 
-  a {
-    all: unset;
-  }
-
-  .item{
+  .item {
     white-space: nowrap;
     background-color: darkgrey;
     color: white;
@@ -49,8 +60,12 @@
   }
 }
 
-.header-mobile{
+.header-mobile {
   font-size: 30px;
   width: 100%;
   text-align: center;
 }
+
+.pointer {
+  cursor: pointer;
+}

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {Link} from "./models/link";
+import {Subgenre} from "./models/subgenre";
+import {Genre} from "./models/genre";
 
 @Component({
   selector: 'app-root',
@@ -9,16 +10,29 @@ import {Link} from "./models/link";
 })
 export class AppComponent implements OnInit {
   isMobileDisplay: boolean = true;
-  links: Link[] = [
-    new Link("Techno", "/techno"),
-    new Link("Drum & Bass", "/drum-n-bass"),
-    new Link("Garage - 2 step", "/garage"),
-    new Link("Psytrance", "/psytrance"),
-    new Link("Metal", "/metal"),
-    new Link("Rock", "/rock"),
-    new Link("Rock variation", "/rock-variation"),
-    new Link("Half time groove", "/half-time-groove")
-  ]
+  selectedGenreIndex: number = 0;
+  selectedSubGenreIndex: number = 0;
+  musicGenres: Genre[] = [
+    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 Genre("Techno", [
+      new Subgenre("Basique", "/techno"),
+    ]),
+    new Genre("Garage", [
+      new Subgenre("Drum & Bass", "/drum-n-bass"),
+      new Subgenre("Garage - 2 step", "/garage"),
+    ]),
+    new Genre("Trance", [
+      new Subgenre("Psytrance", "/psytrance"),
+    ])
+  ];
+
+
 
   constructor(private responsive: BreakpointObserver) {
   }
@@ -31,4 +45,12 @@ export class AppComponent implements OnInit {
         this.isMobileDisplay = !result.matches;
       });
   }
+
+  selectGenre(i: number) {
+    this.selectedGenreIndex = i;
+  }
+
+  selectSubGenre(i: number) {
+    this.selectedSubGenreIndex = i;
+  }
 }

src/app/models/genre.ts

@@ -0,0 +1,6 @@
+import {Subgenre} from "./subgenre";
+
+export class Genre {
+  constructor(public label: string, public subGenres: Subgenre[]) {
+  }
+}

src/app/models/subgenre.ts

@@ -0,0 +1,5 @@
+export class Subgenre {
+  constructor(public label: string, public link: string) {
+
+  }
+}

src/styles.scss

@@ -6,3 +6,7 @@ html, body {
 div, p {
   font-family: 'Kanit', sans-serif;
 }
+
+a {
+  all: unset;
+}