Factorisation des links

Babali42 · Jan 28, 2024 · 0ea0105 · 0ea0105
1 parent a468593
commit 0ea0105
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 34 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -2,43 +2,13 @@
   <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="/techno">Techno</a>
-      <a class="button" routerLink="/drum-n-bass">Drum & Bass</a>
-      <a class="button" routerLink="/garage">Garage - 2 step</a>
-      <a class="button" routerLink="/psytrance">Psytrance</a>
-      <a class="button" routerLink="/metal">Metal</a>
-      <a class="button" routerLink="/rock">Rock</a>
-      <a class="button" routerLink="/rock-variation">Rock variation</a>
-      <a class="button" routerLink="/half-time-groove">Half time groove</a>
+      <a class="button" [routerLink]="link.link" *ngFor="let link of links">{{ link.label }}</a>
     </div>
   </div>
   <div *ngIf="isMobileDisplay">
-    <div class="header nowrap">DRUMS PATTERN LIBRARY</div>
-    <div class="flex" style="width: 100%; scroll: auto">
-      <div>
-        <a class="button" routerLink="/techno">Techno</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/drum-n-bass">Drum & Bass</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/garage">Garage - 2 step</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/psytrance">Psytrance</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/metal">Metal</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/rock">Rock</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/rock-variation">Rock variation</a>
-      </div>
-      <div>
-        <a class="button" routerLink="/half-time-groove">Half time groove</a>
-      </div>
+    <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>
     </div>
   </div>
   <div class="content">

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -30,3 +30,27 @@
 .nowrap{
   white-space: nowrap;
 }
+
+.mobile-menu {
+  width: 100%;
+  overflow-x: auto;
+  gap: 5px;
+
+  a {
+    all: unset;
+  }
+
+  .item{
+    white-space: nowrap;
+    background-color: darkgrey;
+    color: white;
+    border-radius: 15px;
+    padding: 10px;
+  }
+}
+
+.header-mobile{
+  font-size: 30px;
+  width: 100%;
+  text-align: center;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {Link} from "./models/link";
 
 @Component({
   selector: 'app-root',
@@ -8,6 +9,17 @@ import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 })
 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")
+  ]
+
   constructor(private responsive: BreakpointObserver) {
   }
 

diff --git a/src/app/models/link.ts b/src/app/models/link.ts
@@ -0,0 +1,9 @@
+export class Link {
+  label: string;
+  link: string;
+
+  constructor(label: string, link: string) {
+    this.label = label;
+    this.link = link;
+  }
+}