create reusable toggle navigation && change primary color ngPrime for our primary color

Author: Emmanuelle BONOLI

src/app/app.component.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  white-space: pre-line;
 
   .push-footer {
     flex-grow: 1;

src/app/app.config.ts

@@ -7,7 +7,7 @@ import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 import { providePrimeNG } from 'primeng/config';
 import { activitiesReducer } from './features/activity/store/activities.reducers';
-import Aura from '@primeng/themes/aura';
+import { myPreset } from './mytheme';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,7 +19,7 @@ export const appConfig: ApplicationConfig = {
     provideStoreDevtools({ maxAge: 25 }),
     providePrimeNG({
       theme: {
-        preset: Aura,
+        preset: myPreset,
       },
     }),
   ],

src/app/common/components/toggle-menu/toggle-menu.component.html

@@ -0,0 +1,7 @@
+<p-tabs [(value)]="activeTabValue">
+  <p-tablist>
+    @for (tab of tabs; track tab.value) {
+      <p-tab [value]="tab.value" (click)="updateNavigation(tab)">{{ tab.title }}</p-tab>
+    }
+  </p-tablist>
+</p-tabs>

src/app/common/components/toggle-menu/toggle-menu.component.scss

@@ -0,0 +1,12 @@
+p-tablist::ng-deep {
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+p-tab:first-child::ng-deep {
+  border-radius: 5px 0 0 5px;
+}
+
+p-tab:last-child::ng-deep {
+  border-radius: 0 5px 5px 0;
+}

src/app/common/components/toggle-menu/toggle-menu.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Tab, TabList, Tabs } from 'primeng/tabs';
+import { NavigationItems } from '../../models/NavigationItems';
+
+const ZERO: number = 0;
+
+@Component({
+  selector: 'app-toggle-menu',
+  imports: [Tabs, TabList, Tab],
+  templateUrl: './toggle-menu.component.html',
+  styleUrl: './toggle-menu.component.scss',
+})
+export class ToggleMenuComponent {
+  @Input() tabs!: NavigationItems[];
+  @Output() chosenTab: EventEmitter<string> = new EventEmitter<string>();
+
+  activeTabValue: number = ZERO;
+
+  updateNavigation(tab: NavigationItems): void {
+    this.activeTabValue = tab.value;
+    this.chosenTab.emit(tab.title);
+  }
+}

src/app/common/models/NavigationItems.d.ts

@@ -0,0 +1,4 @@
+export type NavigationItems = {
+  title: string;
+  value: number;
+};

src/app/common/models/Numbers.d.ts

@@ -1,5 +1,20 @@
 <div class="activities-home">
-  @for (activity of activities$ | async; track activity.id) {
-    <app-activity-card [activity]="activity"></app-activity-card>
-  }
+  <div class="search-activities">
+    <!--TODO: rajouter ici composant qui regroupe les input de recherche pour la page activities-->
+  </div>
+
+  <div class="cards-and-map">
+    <div class="cards-activities" [ngClass]="chosenNavigation === 'Liste' ? '' : 'hidden'">
+      @for (activity of activities$ | async; track activity.id) {
+        <app-activity-card [activity]="activity"></app-activity-card>
+      }
+    </div>
+    <div class="map-activities" [ngClass]="chosenNavigation === 'Carte' ? '' : 'hidden'">
+      <!--TODO: rajouter ici composant map pour la page activities-->
+    </div>
+  </div>
+
+  <div class="switch-map">
+    <app-toggle-menu [tabs]="navigationItems" (chosenTab)="handleNavigation($event)"></app-toggle-menu>
+  </div>
 </div>

…/app/common/Pipes/TruncateString.pipe.ts …/app/common/pipes/TruncateString.pipe.tssrc/app/common/Pipes/TruncateString.pipe.ts renamed to src/app/common/pipes/TruncateString.pipe.ts src/app/common/Pipes/TruncateString.pipe.ts renamed to src/app/common/pipes/TruncateString.pipe.ts

@@ -1,6 +1,45 @@
 .activities-home {
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-around;
   background-color: var(--background-color-light);
+  width: 100vw;
+  height: 80vh;
+  position: relative;
+
+  .search-activities {
+    border: 1px solid black;
+    height: 150px;
+  }
+
+  .cards-and-map {
+    display: flex;
+    width: 100%;
+
+    .cards-activities {
+      width: 50%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+    }
+
+    .map-activities {
+      width: 50%;
+      border: 1px solid black;
+      flex-grow: 1;
+      height: 50vh;
+    }
+
+    .hidden {
+      display: none;
+    }
+  }
+
+  .switch-map {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }