create header

Author: Emmanuelle BONOLI

public/LogoALAsso.png

@@ -7,7 +7,7 @@
 <!--      <p-button label="Check" (click)="changeMode()" />-->
 <!--    </div>-->
 <!--  </div>-->
-<div>
+<div class="page">
   <router-outlet></router-outlet>
 </div>
 <!--</div>-->

src/app/app.component.html

@@ -1,19 +1,20 @@
 import { Component } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './features/header/header.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [ButtonModule, RouterOutlet],
+  imports: [ButtonModule, RouterOutlet, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
   // TODO: à supprimer quand le dark mode sera fonctionnel
-  darkMode: boolean = false;
-
-  changeMode(): void {
-    this.darkMode = !this.darkMode;
-  }
+  // darkMode: boolean = false;
+  //
+  // changeMode(): void {
+  //   this.darkMode = !this.darkMode;
+  // }
 }

src/app/app.component.ts

@@ -1,14 +1,16 @@
 import { Routes } from '@angular/router';
-import { AppComponent } from './app.component';
 import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
+import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
 
 export const routes: Routes = [
   {
     path: '',
-    component: AppComponent,
-  },
-  {
-    path: 'activities',
-    component: ActivitiesHomeComponent,
+    component: MainLayoutComponent,
+    children: [
+      {
+        path: 'activities',
+        component: ActivitiesHomeComponent,
+      },
+    ],
   },
 ];

src/app/app.routes.ts

@@ -1,6 +1,4 @@
 .activities-home {
-  width: 100vw;
-  height: 100vh;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;

src/app/features/activity/pages/activities-home/activities-home.component.scss

@@ -0,0 +1,7 @@
+<header>
+  <div class="logo">
+    <img src="/LogoALAsso.png" alt="logo A l'asso!" />
+    <h1>a l'asso !</h1>
+  </div>
+  <!--TODO: ajouter la connexion ici-->
+</header>

src/app/features/header/header.component.html

@@ -0,0 +1,19 @@
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1% 0 1%;
+  margin-bottom: 4%;
+  color: var(--primary-dark-color);
+  box-shadow: var(--box-shadow);
+
+  .logo {
+    display: flex;
+    width: 40%;
+    gap: 5%;
+  }
+
+  h1 {
+    font-weight: 400;
+  }
+}

src/app/features/header/header.component.scss

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

src/app/features/header/header.component.spec.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  imports: [],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+})
+export class HeaderComponent {}

src/app/features/header/header.component.ts

@@ -0,0 +1,5 @@
+<div class="main-layout">
+  <app-header></app-header>
+  <router-outlet></router-outlet>
+  <!--TODO: ajouter le footer ici-->
+</div>