🚧 Add the modal

src/app/components/add-pin-popup/add-pin-popup.component.html

@@ -0,0 +1,144 @@
+<!-- Modal toggle -->
+<button
+  data-modal-target="authentication-modal"
+  data-modal-toggle="authentication-modal"
+  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+  type="button"
+>
+  Add a pin
+</button>
+
+<!-- Main modal -->
+<div
+  id="authentication-modal"
+  tabindex="-1"
+  aria-hidden="true"
+  class="hidden absolute top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"
+>
+  <div class="relative p-4 w-full max-w-md max-h-full">
+    <!-- Modal content -->
+    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      <!-- Modal header -->
+      <div
+        class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
+      >
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+          Créer ton souvenir !
+        </h3>
+        <button
+          type="button"
+          class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          data-modal-hide="authentication-modal"
+        >
+          <svg
+            class="w-3 h-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 14"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+            />
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+      </div>
+      <!-- Modal body -->
+      <div class="p-4 md:p-5">
+        <form class="space-y-4" action="#">
+          <div>
+            <label
+              for="title"
+              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Titre</label
+            >
+            <input
+              type="title"
+              name="title"
+              id="title"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+              placeholder="Mont Saint-Michel"
+              required
+            />
+          </div>
+
+          <div class="flex items-center justify-center w-full">
+            <label
+              for="dropzone-file"
+              class="flex flex-col items-center justify-center w-full h-36 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500"
+            >
+              <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                <svg
+                  class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 20 16"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                  />
+                </svg>
+                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                  <span class="font-semibold">Click to upload</span> or drag and
+                  drop
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  PNG, JPG or GIF
+                </p>
+              </div>
+              <input id="dropzone-file" type="file" class="hidden" />
+            </label>
+          </div>
+          <div>
+            <label
+              for="description"
+              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Description</label
+            >
+            <input
+              type="description"
+              name="description"
+              id="description"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+              placeholder="Describe your memory"
+              required
+            />
+          </div>
+          <div>
+            <label
+              for="localisation"
+              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >Localisation</label
+            >
+            <input
+              type="localisation"
+              name="localisation"
+              id="localisation"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+              placeholder="x"
+              required
+            />
+          </div>
+          <div class="flex justify-between">
+            <button
+              type="submit"
+              class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              Valider
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/add-pin-popup/add-pin-popup.component.spec.ts

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

src/app/components/add-pin-popup/add-pin-popup.component.ts

@@ -0,0 +1,9 @@
+import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-add-pin-popup',
+  imports: [MatGoogleMapsAutocompleteModule],
+  templateUrl: './add-pin-popup.component.html',
+})
+export class AddPinPopupComponent {}

src/app/components/leaflet-map/leaflet-map.component.html

@@ -1,3 +1,3 @@
 <div class="map-container h-[calc(100vh_-_72px)]">
-  <div id="map" class="h-full w-full"></div>
+  <div id="map" class="h-full w-full z-0"></div>
 </div>

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

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

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

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
 
 @Component({
   selector: 'app-navbar',
-  imports: [],
+  imports: [AddPinPopupComponent],
   templateUrl: './navbar.component.html',
 })
 export class NavbarComponent {}