Navbar

package.json

@@ -32,6 +32,8 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "@fortawesome/angular-fontawesome": "0.15.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app.component.html

@@ -1,3 +1,5 @@
 <div class="background"></div>
 <div class="glass"></div>
+<app-navbar></app-navbar>
 <router-outlet />
+<app-navbar-mobile></app-navbar-mobile>

src/app/app.component.scss

@@ -18,3 +18,14 @@
   backdrop-filter: blur(40px) saturate(140%);
   background-color: rgba(0, 100, 42, 0.1);
 }
+app-navbar-mobile {
+  display: none;
+}
+@media (max-width: 798px) {
+  app-navbar {
+    display: none;
+  }
+  app-navbar-mobile {
+    display: block;
+  }
+}

src/app/app.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from './components/navbar/navbar.component';
+import { NavbarMobileComponent } from './components/navbar-mobile/navbar-mobile.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, AppComponent],
+  imports: [RouterOutlet, AppComponent, NavbarComponent, NavbarMobileComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

src/app/components/faq/faq.component.html

@@ -7,51 +7,51 @@ <h3>
     </h3>
   </section>
   <section class="accordion">
-    <details open>
+    <details open name="faq-item">
       <summary>Comment fonctionne la plateforme HeartLink ?</summary>
       <p>
         HeartLink permet aux utilisateurs de choisir et de personnaliser leurs dons mensuels à des associations variées.
         Vous pouvez sélectionner les causes qui vous tiennent à cœur et répartir vos dons en fonction de vos
         préférences.
       </p>
     </details>
-    <details>
+    <details name="faq-item">
       <summary>Comment puis-je m'inscrire sur HeartLink ?</summary>
       <p>
         Pour vous inscrire, cliquez sur le bouton "S'inscrire" sur la page d'accueil, remplissez le formulaire
         d'inscription avec vos informations personnelles et choisissez vos préférences de don.
       </p>
     </details>
-    <details>
+    <details name="faq-item">
       <summary>Puis-je modifier mes préférences de don après l'inscription ?</summary>
       <p>
         Oui, vous pouvez modifier vos préférences de don à tout moment en accédant à votre tableau de bord personnel et
         en ajustant les pourcentages alloués à chaque association.
       </p>
     </details>
-    <details>
+    <details name="faq-item">
       <summary>Comment puis-je être sûr que mes dons sont utilisés de manière transparente ?</summary>
       <p>
         HeartLink s'engage à la transparence totale. Nous fournissons des rapports détaillés sur l'impact de vos dons et
         la manière dont les fonds sont utilisés par les associations.
       </p>
     </details>
-    <details>
+    <details name="faq-item">
       <summary>Quels types d'associations sont disponibles sur HeartLink ?</summary>
       <p>
         Nous travaillons avec une large variété d'associations, couvrant des domaines tels que la santé, l'éducation,
         l'environnement, les droits de l'homme, la protection des animaux, et bien plus encore.
       </p>
     </details>
-    <details>
+    <details name="faq-item">
       <summary>Comment puis-je contacter le support client en cas de problème ?</summary>
       <p>
         Vous pouvez nous contacter via le formulaire de contact sur notre site, par e-mail à
         <a href="mailto:contact&#64;heartlink.fr">contact&#64;heartlink.fr</a>, ou utiliser le chat en direct disponible
         sur notre page d'accueil.
       </p>
     </details>
-    <details>
+    <details name="faq-item">
       <summary>Quels modes de paiement sont acceptés sur HeartLink ?</summary>
       <p>
         Nous acceptons divers modes de paiement, y compris les cartes de crédit/débit, les virements bancaires et les

src/app/components/faq/faq.component.scss

@@ -1,9 +1,15 @@
 main {
+  color: black;
   overflow: hidden;
   section {
     width: 70%;
     margin: 0 auto;
-    padding-top: 2rem;
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    &:not(:first-of-type) {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+
     h2 {
       margin-bottom: 1rem;
       text-align: center;
@@ -28,14 +34,19 @@ main {
 
     details {
       border-top: 1px solid #000;
-      padding: 1rem;
       font-weight: var(--font-weight-bold);
       text-shadow: none;
+      &:first-of-type {
+        border-top: none;
+      }
       summary {
+        padding: 1rem;
       }
       p {
-        margin-top: 1rem;
+        padding: 0.5rem 1rem;
         font-weight: var(--font-weight-lighter);
+        width: 90%;
+        cursor: pointer;
       }
     }
   }

src/app/components/faq/faq.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, Renderer2 } from '@angular/core';
 
 @Component({
   selector: 'app-faq',
@@ -7,34 +7,18 @@ import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
   templateUrl: './faq.component.html',
   styleUrls: ['./faq.component.scss'],
 })
-export class FaqComponent implements AfterViewInit, OnDestroy {
-  private detailsElements!: NodeListOf<HTMLDetailsElement>;
-  private eventListeners: (() => void)[] = [];
-
-  constructor(private el: ElementRef) {}
+export class FaqComponent implements AfterViewInit {
+  constructor(private renderer: Renderer2) {}
 
   ngAfterViewInit() {
-    this.detailsElements = (this.el.nativeElement as HTMLElement).querySelectorAll('details');
-    this.detailsElements.forEach((details: HTMLDetailsElement) => {
-      const toggleListener = () => {
-        if (details.open) {
-          this.detailsElements.forEach((otherDetails: HTMLDetailsElement) => {
-            if (otherDetails !== details) {
-              otherDetails.open = false;
-            }
-          });
+    const paragraphs = document.querySelectorAll('details p');
+    paragraphs.forEach(p => {
+      this.renderer.listen(p, 'click', () => {
+        const details = p.closest('details');
+        if (details) {
+          this.renderer.removeAttribute(details, 'open');
         }
-      };
-      details.addEventListener('toggle', toggleListener);
-      this.eventListeners.push(() => {
-        details.removeEventListener('toggle', toggleListener);
       });
     });
   }
-
-  ngOnDestroy() {
-    this.eventListeners.forEach(removeListener => {
-      removeListener();
-    });
-  }
 }

src/app/components/navbar-mobile/navbar-mobile.component.html

@@ -0,0 +1,23 @@
+<main>
+  <section>
+    <ul>
+      <li>
+        <a [routerLink]="['/home']" [routerLinkActive]="['is-active']"><fa-icon [icon]="faHouse"></fa-icon></a>
+      </li>
+      <li>
+        <a [routerLink]="['/asso']" [routerLinkActive]="['is-active']"
+          ><fa-icon [icon]="faMagnifyingGlass"></fa-icon
+        ></a>
+      </li>
+      <li>
+        <a [routerLink]="['/faq']" [routerLinkActive]="['is-active']"><fa-icon [icon]="faQuestion"></fa-icon></a>
+      </li>
+      <li>
+        <a [routerLink]="['/transparency']" [routerLinkActive]="['is-active']"><fa-icon [icon]="faEye"></fa-icon></a>
+      </li>
+      <li>
+        <a [routerLink]="['/auth/login']"><fa-icon [icon]="faUser"></fa-icon> </a>
+      </li>
+    </ul>
+  </section>
+</main>

src/app/components/navbar-mobile/navbar-mobile.component.scss

@@ -0,0 +1,44 @@
+main {
+  position: fixed !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  margin: 0 auto;
+  text-shadow: none;
+
+  section {
+    border-radius: 8px 8px 0 0;
+    box-shadow: var(--button-box-shadow);
+    padding: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--navbar-bg-color);
+    ul {
+      flex-grow: 1;
+      display: flex;
+      justify-content: space-around;
+      width: 100%;
+      li {
+        list-style: none;
+        border-radius: 8px;
+        cursor: pointer;
+        a {
+          border-radius: 8px;
+          display: block;
+          padding: 0.7rem 1rem;
+          text-decoration: none;
+          color: #000;
+          font-weight: bold;
+          &:active {
+            transform: scale(1.1);
+          }
+        }
+      }
+    }
+  }
+}
+.is-active {
+  background-color: #e0e0e0;
+}

src/app/components/navbar-mobile/navbar-mobile.component.spec.ts

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

src/app/components/navbar-mobile/navbar-mobile.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faCoffee, faHouse, faMagnifyingGlass, faQuestion, faUser, faEye } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-navbar-mobile',
+  standalone: true,
+  imports: [RouterModule, FaIconComponent],
+  templateUrl: './navbar-mobile.component.html',
+  styleUrl: './navbar-mobile.component.scss',
+})
+export class NavbarMobileComponent {
+  faCoffee = faCoffee;
+  faHouse = faHouse;
+  faMagnifyingGlass = faMagnifyingGlass;
+  faQuestion = faQuestion;
+  faUser = faUser;
+  faEye = faEye;
+}

src/app/components/navbar/navbar.component.html

@@ -0,0 +1,14 @@
+<main>
+  <div>
+    <section><h1>HeartLink</h1></section>
+    <section>
+      <ul>
+        <li><a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Accueil</a></li>
+        <li><a [routerLink]="['/asso']" [routerLinkActive]="['is-active']">Association</a></li>
+        <li><a [routerLink]="['/faq']" [routerLinkActive]="['is-active']">FAQ</a></li>
+        <li><a [routerLink]="['/transparency']" [routerLinkActive]="['is-active']">Transparence</a></li>
+      </ul>
+    </section>
+    <section><button [routerLink]="['/auth/login']">Login</button></section>
+  </div>
+</main>

src/app/components/navbar/navbar.component.scss

@@ -0,0 +1,68 @@
+main {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-shadow: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  div {
+    flex-shrink: 0;
+    flex-basis: 90%;
+    box-shadow: var(--button-box-shadow);
+    padding: 0.5rem;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--navbar-bg-color);
+    gap: 2rem;
+    section {
+      h1 {
+        display: flex;
+        height: 100%;
+        text-align: center;
+        margin-bottom: -0.4rem;
+      }
+      ul {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        li {
+          list-style: none;
+          border-radius: 8px;
+          cursor: pointer;
+          margin: 0 0.5rem;
+          a {
+            border-radius: 8px;
+            display: block;
+            padding: 0.7rem 1rem;
+            text-decoration: none;
+            color: #000;
+            font-weight: bold;
+            cursor: pointer;
+            &:hover {
+              background-color: #e0e0e0;
+            }
+            &:active {
+              transform: scale(1.1);
+            }
+          }
+        }
+      }
+      button {
+        background-color: var(--color-black);
+        color: var(--color-white);
+        padding: 0.7rem 1.5rem;
+        border: none;
+        border-radius: 8px;
+        box-shadow: none;
+        &:active {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+  .is-active {
+    background-color: #e0e0e0;
+  }
+}