header et side-bar

src/app/app-routing.module.ts

@@ -1,10 +1,40 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PageAccountComponent } from './pages/page-account/page-account.component';
+import { PageAccueilComponent } from './pages/page-accueil/page-accueil.component';
+import { PageAddMemberComponent } from './pages/page-add-member/page-add-member.component';
+import { PageAgendaComponent } from './pages/page-agenda/page-agenda.component';
+import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.component';
+import { PageDeleteMemberComponent } from './pages/page-delete-member/page-delete-member.component';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageMenuSemaineComponent } from './pages/page-menu-semaine/page-menu-semaine.component';
+import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
+import { PageRepertoireComponent } from './pages/page-repertoire/page-repertoire.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+import { PageSignupComponent } from './pages/page-signup/page-signup.component';
+import { PageToDoListComponent } from './pages/page-to-do-list/page-to-do-list.component';
+import { PageUpdateMemberComponent } from './pages/page-update-member/page-update-member.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'compte', component: PageAccountComponent },
+  { path: 'accueil', component: PageAccueilComponent },
+  { path: 'ajout-membre', component: PageAddMemberComponent },
+  { path: 'agenda', component: PageAgendaComponent },
+  { path: 'tableau-de-bord', component: PageDashboardComponent },
+  { path: 'supprimer-membre', component: PageDeleteMemberComponent },
+  { path: 'password-oublie', component: PageForgotPasswordComponent },
+  { path: 'menu', component: PageMenuSemaineComponent },
+  { path: 'repertoire', component: PageRepertoireComponent },
+  { path: 'reinitialisation-password', component: PageResetPasswordComponent },
+  { path: 'creation-compte', component: PageSignupComponent },
+  { path: 'to-do-list', component: PageToDoListComponent },
+  { path: 'modifier-membre', component: PageUpdateMemberComponent },
+  { path: '**', component: PageNotFoundComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/components/header/header.component.html

@@ -1 +1,10 @@
-<p>header works!</p>
+<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow py-0 ">
+    <div class="container-fluid">
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+                <img routerLink="accueil" routerLinkActive="active-custom" class="nav-link" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-organizee.png"/>
+            </div>
+        </div>
+        <a class="navbar-brand" href="#">Organizee</a>
+    </div>
+</nav>

src/app/components/header/header.component.scss

@@ -0,0 +1,4 @@
+.navbar-brand {
+  position: absolute;
+  margin-left: 10%;
+}

src/app/components/side-bar/side-bar.component.html

@@ -1 +1,11 @@
-<p>side-bar works!</p>
+<nav class="custom-side-bar flex-shrink-0 bg-white border-end">
+    <div  id="navbarNavAltMarkup">
+        <div class="navbar-nav">
+            <a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
+            <a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
+            <a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
+            <a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
+            <a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
+        </div>
+    </div>
+</nav>

src/app/pages/page-account/page-account.component.html

@@ -1 +1,2 @@
-<p>page-account works!</p>
+<app-header></app-header>
+<app-side-bar></app-side-bar>

src/app/pages/page-accueil/page-accueil.component.html

@@ -1 +1 @@
-<p>page-accueil works!</p>
+<app-header></app-header>

src/app/pages/page-add-member/page-add-member.component.html

@@ -1 +1 @@
-<p>page-add-member works!</p>
+<app-header></app-header>

src/app/pages/page-agenda/page-agenda.component.html

@@ -1 +1,2 @@
-<p>page-agenda works!</p>
+<app-header></app-header>
+<app-side-bar></app-side-bar>

src/app/pages/page-dashboard/page-dashboard.component.html

@@ -1 +1,2 @@
-<p>page-dashboard works!</p>
+<app-header></app-header>
+<app-side-bar></app-side-bar>

src/app/pages/page-delete-member/page-delete-member.component.html

@@ -1 +1 @@
-<p>page-delete-member works!</p>
+<app-header></app-header>

src/app/pages/page-forgot-password/page-forgot-password.component.html

@@ -1 +1,2 @@
-<p>page-forgot-password works!</p>
+<app-header></app-header>
+

src/app/pages/page-menu-semaine/page-menu-semaine.component.html

@@ -1 +1,2 @@
-<p>page-menu-semaine works!</p>
+<app-header></app-header>
+<app-side-bar></app-side-bar>

src/app/pages/page-not-found/page-not-found.component.html

@@ -1 +1,2 @@
-<p>page-not-found works!</p>
+<app-header></app-header>
+<p>Error 404 Page Not FOUND!!!!!!!!!!!</p>

src/app/pages/page-repertoire/page-repertoire.component.html

@@ -1 +1,2 @@
-<p>page-repertoire works!</p>
+<app-header></app-header>
+<app-side-bar></app-side-bar>

src/app/pages/page-reset-password/page-reset-password.component.html

@@ -1 +1 @@
-<p>page-reset-password works!</p>
+<app-header></app-header>

src/app/pages/page-signup/page-signup.component.html

@@ -1 +1 @@
-<p>page-signup works!</p>
+<app-header></app-header>

src/app/pages/page-to-do-list/page-to-do-list.component.html

@@ -1 +1,2 @@
-<p>page-to-do-list works!</p>
+<app-header></app-header>
+<app-side-bar></app-side-bar>

src/app/pages/page-update-member/page-update-member.component.html

@@ -1 +1 @@
-<p>page-update-member works!</p>
+<app-header></app-header>