initial

src/app/components/nav-bar/nav-bar.component.html

@@ -0,0 +1,27 @@
+<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow ">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">🪴 La Belle Plante</a>
+        <button class="navbar-toggler" 
+            type="button" 
+            data-bs-toggle="collapse" 
+            data-bs-target="#navbarNavAltMarkup"
+            aria-controls="navbarNavAltMarkup" 
+            aria-expanded="false" 
+            aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+                <a routerLink="home" routerLinkActive="active-custom" class="nav-link">Accueil</a>
+                <a routerLink="details" routerLinkActive="active-custom" class="nav-link">Details</a>
+                <a routerLink="account/signin" routerLinkActive="active-custom" class="nav-link">Se connecter</a>
+                <a routerLink="account/user" routerLinkActive="active-custom" class="nav-link">Mon compte</a>
+                <a class="nav-link">Panier</a>
+                <a class="nav-link disabled">Plus d'option bientôt</a>
+                <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>
+                <a class="nav-link disabled" *ngIf="likeCounter == 1">Plante likée : {{ likeCounter }}</a>
+                <a class="nav-link disabled" *ngIf="likeCounter > 1">Plantes likées : {{ likeCounter }}</a>
+            </div>
+        </div>
+    </div>
+</nav>

src/app/components/nav-bar/nav-bar.component.scss

@@ -0,0 +1,3 @@
+.active-custom {
+    color: green !important;
+}

src/app/components/nav-bar/nav-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/nav-bar/nav-bar.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { PlantouneService } from 'src/app/services/plantoune.service';
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.scss']
+})
+export class NavBarComponent implements OnInit, OnDestroy {
+  likeCounter: number;
+  subPlantLiked!: Subscription;
+
+  constructor(private plantouneService: PlantouneService) {
+    this.likeCounter = 0;
+   }
+
+  ngOnInit(): void {
+    this.subPlantLiked = this.plantouneService.plantLiked$.subscribe(
+      () => {
+        console.log('Get new event from Subject');
+        this.likeCounter ++;
+      }
+    )
+  }
+
+  ngOnDestroy(): void {
+      this.subPlantLiked.unsubscribe();
+  }
+
+}