add friend service + modify navbar to open friend popup

src/app/components/friend-page/friend-page.component.html

@@ -0,0 +1,66 @@
+<!-- Bouton d'ouverture du modal -->
+<button
+  data-modal-target="friends-modal"
+  data-modal-toggle="friends-modal"
+  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+  type="button"
+>
+  Amis
+</button>
+
+<!-- Modal principal -->
+<div
+  id="friends-modal"
+  tabindex="-1"
+  aria-hidden="true"
+  class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50"
+>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full">
+    <!-- En-tête du modal -->
+    <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Liste d'amis</h3>
+      <button
+        data-modal-toggle="friends-modal"
+        class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+      >
+        ✕
+      </button>
+    </div>
+
+    <!-- Barre de recherche -->
+    <div class="p-4">
+      <input
+        type="text"
+        id="search-friends"
+        class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"
+        placeholder="Rechercher un ami..."
+      />
+    </div>
+
+    <!-- Contenu du modal -->
+    <div class="p-4 space-y-3">
+      <div class="friend flex items-center space-x-3">
+        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=1" alt="Friend 1">
+        <span class="text-gray-900 dark:text-white">Alice</span>
+      </div>
+      <div class="friend flex items-center space-x-3">
+        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=2" alt="Friend 2">
+        <span class="text-gray-900 dark:text-white">Bob</span>
+      </div>
+      <div class="friend flex items-center space-x-3">
+        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=3" alt="Friend 3">
+        <span class="text-gray-900 dark:text-white">Charlie</span>
+      </div>
+    </div>
+
+    <!-- Pied du modal -->
+    <div class="flex justify-end p-4 border-t dark:border-gray-700">
+      <button
+        data-modal-toggle="friends-modal"
+        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+      >
+        Fermer
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/friend-page/friend-page.component.spec.ts

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

src/app/components/friend-page/friend-page.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { FriendsService } from '../../services/friends/friends.service';
+import { User } from '../../model/User';
+
+@Component({
+  selector: 'app-friend-page',
+  imports: [],
+  templateUrl: './friend-page.component.html',
+  styleUrl: './friend-page.component.css'
+})
+export class FriendPageComponent {
+
+  private readonly listFriend : User[] = [];
+  constructor(friendService : FriendsService){}
+
+
+
+}

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

@@ -166,11 +166,7 @@
           <app-add-pin-popup></app-add-pin-popup>
         </li>
         <li class="flex items-center space-x-2">
-          <a
+          <app-friend-page></app-friend-page>
-            href="#"
-            class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Amis
-          </a>
         </li>
       </ul>
     </div>

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

@@ -2,10 +2,11 @@ import { NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
+import { FriendPageComponent } from "../friend-page/friend-page.component";
 
 @Component({
   selector: 'app-navbar',
-  imports: [AddPinPopupComponent, NgIf],
+  imports: [AddPinPopupComponent, NgIf, FriendPageComponent],
   templateUrl: './navbar.component.html',
 })
 export class NavbarComponent implements OnInit {

src/app/services/friends/friends.service.spec.ts

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

src/app/services/friends/friends.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FriendsService {
+
+  private apiURL = environment.apiURL;
+  private token = localStorage.getItem('auth_token');
+  constructor(private http: HttpClient) { }
+
+
+  getFriend(){
+    const url = `${this.apiURL}/friends`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + this.token,
+    });
+    return this.http.get(url);
+  }
+
+
+}