Amélioration du style

Author: Babali42

src/app/app.component.html

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

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,7 +60,7 @@
   }
 }
 
-.header-mobile{
+.header-mobile {
   font-size: 30px;
   width: 100%;
   text-align: center;

src/app/app.component.ts

@@ -11,6 +11,7 @@ import {Genre} from "./models/genre";
 export class AppComponent implements OnInit {
   isMobileDisplay: boolean = true;
   selectedGenreIndex: number = 0;
+  selectedSubGenreIndex: number = 0;
   musicGenres: Genre[] = [
     new Genre("Metal",
       [
@@ -32,6 +33,7 @@ export class AppComponent implements OnInit {
   ];
 
 
+
   constructor(private responsive: BreakpointObserver) {
   }
 
@@ -47,4 +49,8 @@ export class AppComponent implements OnInit {
   selectGenre(i: number) {
     this.selectedGenreIndex = i;
   }
+
+  selectSubGenre(i: number) {
+    this.selectedSubGenreIndex = i;
+  }
 }

src/styles.scss

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