feat: add modal to show that it's offline

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { NotFoundComponent } from './secondary-components/not-found/not-found.co
 import { NavbarComponent } from './secondary-components/navbar/navbar.component';
 import { PortfolioComponent } from './portfolio/portfolio.component';
 import { DisableWhenOfflineDirective } from './services/disable-when-offline.directive';
+import { OfflineModalComponent } from './secondary-components/offline-modal/offline-modal.component';
 
 export const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json');
 const ngxLoaderUiConfig: NgxUiLoaderConfig = {
@@ -69,6 +70,7 @@ const ngxLoaderUiConfig: NgxUiLoaderConfig = {
     SeparadorComponent,
     MHomeComponent,
     IconesComponent,
+    OfflineModalComponent,
     PublicationsComponent,
     TechnologiesComponent,
     RecommendationsComponent,

src/app/secondary-components/offline-modal/offline-modal.component.html

@@ -0,0 +1,18 @@
+<div class="modal fade" id="offlineModalCenter" tabindex="-1" role="dialog" aria-labelledby="offlineModalCenterTitle"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="offlineModal" translate>modal.title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close Button">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" translate>
+                modal.description
+            </div>
+            <div class="modal-footer">
+            </div>
+        </div>
+    </div>
+</div>

src/app/secondary-components/offline-modal/offline-modal.component.spec.ts

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

src/app/secondary-components/offline-modal/offline-modal.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-offline-modal',
+  templateUrl: './offline-modal.component.html',
+  styleUrl: './offline-modal.component.css'
+})
+export class OfflineModalComponent {
+
+}