YOLO

src/app/app.component.html

@@ -1,6 +1,4 @@
-<div id="page">
-    <app-header></app-header>
-    <div id="content">
-      <router-outlet></router-outlet>
-    </div>
+<app-header></app-header>
+<div id="content">
+  <router-outlet></router-outlet>
 </div>

src/app/app.component.scss

@@ -1,8 +1,9 @@
-#page {
+:host {
+  display: block;
   height: 100vh;
   width: 100vw;
+}
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+#content {
+  height: 100%;
 }

src/app/articles-content/articles-content.component.html

@@ -1 +1,3 @@
-<p>articles-content works!</p>
+<div id="douleur">
+  <p>{{message}}</p>
+</div>

src/app/articles-content/articles-content.component.scss

@@ -0,0 +1,10 @@
+#douleur {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  text-align: center;
+  font-size:2000%;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+}

src/app/articles-content/articles-content.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { PainService } from '../pain.service';
 
 @Component({
   selector: 'app-articles-content',
@@ -7,4 +8,12 @@ import { Component } from '@angular/core';
 })
 export class ArticlesContentComponent {
 
+  message : string = 'Coucou je vais bien'
+  constructor(private pain: PainService) {
+
+  }
+
+  ngOnInit() {
+    this.pain.douleur$.asObservable().subscribe(data => this.message = data)
+  }
 }

src/app/header/header.component.html

@@ -1,5 +1,5 @@
 
-<em id="MOTD">Salut c'est le site de Valentin</em>
+<em id="MOTD">Salut c'est le site de Valou</em>
 <nav>
   <app-nav-button *ngFor="let button of NAV_BUTTONS" [defaultMenuName]=button.name [routerLink]=button.target_url></app-nav-button>
 </nav>

src/app/header/header.component.scss

@@ -1,12 +1,10 @@
 :host {
-  position: fixed;
-  top: 0;
-  left: 0;
+  position: sticky;
 
   width: 100%;
-  height: clamp(60px, 5%, 150px);
+  height: 5%;
 
-  background-color: aqua;
+  background-color: #ffbbff;
   opacity: 60%;
 
   transition: height 0.75s;
@@ -15,25 +13,29 @@
   flex-direction: row;
   align-items: center;
 
+  app-nav-button {
+    color:#440060;
+  }
+
 
 
   &:hover {
     opacity: 100%;
-    background-color: darkblue;
-    height: clamp(60px, 10%, 150px);
+    background-color: #440060;
+    height: 10%;
 
     #MOTD {
         color: pink;
     }
 
     app-nav-button {
-        color: azure;
+      color:#ffbbff;
     }
   }
 }
 
 app-search-bar {
-  padding-right: 2%;
+  padding-left: 30%;
   height: fit-content;
 }
 

src/app/header/nav-button/nav-button.component.scss

@@ -5,24 +5,27 @@
     user-select: none;
     cursor: pointer;
 
-    border: none;
+    border: solid;
+    border-color:transparent;
     border-radius: 20px;
 
     color: inherit;
+    font-weight: bold;
+    font-family: "Playfair Display rev=1";
     background-color: inherit;
 
     transition: background-color 0s;
 
     font-size: large;
 
     &:hover {
-        color: darkblue;
-        background-color: cyan;
-        transition: background-color 0.75s ease-in-out;
+        color: #440060;
+        background-color: #ffbbff;
+        transition: background-color 0.5s ease-in-out;
     }
 }
 
 .button-hightlight {
   border: solid;
-  border-color: lightcoral;
+  border-color: #440060;
 }

src/app/header/search-bar/search-bar.component.html

@@ -1,5 +1,5 @@
 <div id="searchBar">
-  <input>
-  <object data="assets/magnifying-glass-svgrepo-com.svg" width="10" height="10"></object>
+  <input type="search" placeholder="Donne ta carte bleu" id="searchBarInput">
+  <object (click)="showPain()" id="magnifyingGlass" data="assets/magnifying-glass-svgrepo-com.svg" width="10" height="10"></object>
 </div>
 

src/app/header/search-bar/search-bar.component.scss

@@ -1,3 +1,4 @@
-#searchBar {
-
+#magnifyingGlass {
+  padding-left: 5px;
+  cursor: pointer;
 }

src/app/header/search-bar/search-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { PainService } from 'src/app/pain.service';
 
 @Component({
   selector: 'app-search-bar',
@@ -7,4 +8,15 @@ import { Component } from '@angular/core';
 })
 export class SearchBarComponent {
 
+
+  constructor(private pain: PainService) {
+
+  }
+
+
+  showPain() {
+    let searchBarInput = document.getElementById('searchBarInput') as HTMLInputElement;
+    this.pain.showPain(searchBarInput.value);
+  }
+
 }

src/app/pain.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PainService } from './pain.service';
+
+describe('PainService', () => {
+  let service: PainService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PainService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/pain.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PainService {
+
+  douleur$ = new BehaviorSubject('')
+
+  showPain(inputText:string) {
+    this.douleur$.next(inputText)
+  }
+
+
+  constructor() { }
+}

src/styles.scss

@@ -1 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
+body {
+  margin: 0;
+}