Merge pull request #3 from Babali42/responsive

Responsive et factorisation des liens dans le menu

Author: Babali42

package-lock.json

@@ -11,6 +11,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^14.0.0",
+    "@angular/cdk": "^14.2.7",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",

package.json

@@ -1,18 +1,16 @@
-<div class="flex main-container">
-  <div class="flex column left-menu">
+<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="/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-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">
     <router-outlet></router-outlet>
   </div>

src/app/app.component.html

@@ -26,3 +26,31 @@
 .left-menu {
   border-right: solid 1px black;
 }
+
+.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;
+}

src/app/app.component.scss

@@ -1,10 +1,34 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {Link} from "./models/link";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'DrumsPatternLibrary';
+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) {
+  }
+
+  ngOnInit(): void {
+    this.responsive.observe([
+      Breakpoints.Web,
+    ])
+      .subscribe(result => {
+        this.isMobileDisplay = !result.matches;
+      });
+  }
 }

src/app/app.component.ts

@@ -0,0 +1,9 @@
+export class Link {
+  label: string;
+  link: string;
+
+  constructor(label: string, link: string) {
+    this.label = label;
+    this.link = link;
+  }
+}