Added routing

src/app/app.html

@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<ion-app>
+    <ion-router-outlet></ion-router-outlet>
+</ion-app>

src/app/app.routes.ts

@@ -1,29 +1,26 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
 
+// TODO: Guard pour empêcher la recherche de pages
 export const routes: Routes = [
+    {path: '', redirectTo: '/login', pathMatch: 'full'},
+    {path: 'login', loadComponent: () => import('./pages/login/login.component').then(m => m.LoginComponent)},
     {
         path: '',
-        pathMatch: 'full',
-        redirectTo: '/login'
-    },
-    { // TODO: Guard pour empêcher la recherche de page
-        path: 'login',
-        loadComponent: () => import('./pages/login/login.component').then(x => x.LoginComponent)
-    },
-    {
-        path: 'home',
-        loadComponent: () => import('./pages/home/home.component').then(x => x.HomeComponent)
-    },
-    {
-        path: 'groups',
-        loadComponent: () => import('./pages/groups/groups.component').then(x => x.GroupsComponent)
-    },
-    {
-        path: 'ranking',
-        loadComponent: () => import('./pages/ranking/ranking.component').then(x => x.RankingComponent)
-    },
-    {
-        path: 'social',
-        loadComponent: () => import('./pages/social/social.component').then(x => x.SocialComponent)
+        loadComponent: () => import('./components/navbar/navbar.component').then(m => m.NavbarComponent),
+        children: [
+            {path: 'home', loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)},
+            {
+                path: 'groups',
+                loadComponent: () => import('./pages/groups/groups.component').then(m => m.GroupsComponent)
+            },
+            {
+                path: 'ranking',
+                loadComponent: () => import('./pages/ranking/ranking.component').then(m => m.RankingComponent)
+            },
+            {
+                path: 'social',
+                loadComponent: () => import('./pages/social/social.component').then(m => m.SocialComponent)
+            },
+        ]
     }
 ];

src/app/app.ts

@@ -1,10 +1,9 @@
 import {Component} from '@angular/core';
 import {IonicModule} from "@ionic/angular";
-import {RouterOutlet} from "@angular/router";
 
 @Component({
     selector: 'app-root',
-    imports: [IonicModule, RouterOutlet],
+    imports: [IonicModule],
     templateUrl: './app.html',
     styleUrl: './app.css'
 })

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

@@ -0,0 +1,29 @@
+<ion-app>
+    <ion-tabs>
+
+        <ion-router-outlet></ion-router-outlet>
+
+        <ion-tab-bar slot="bottom" style="
+        --background: #FFFFFF;
+        --color: #C0C0C0;
+        --color-selected: #000000;
+      ">
+
+            <ion-tab-button tab="home" routerLink="/home">
+                <ion-icon name="home-outline"></ion-icon>
+            </ion-tab-button>
+
+            <ion-tab-button tab="groups" routerLink="/groups">
+                <ion-icon name="chatbubbles-outline"></ion-icon>
+            </ion-tab-button>
+
+            <ion-tab-button tab="ranking" routerLink="/ranking">
+                <ion-icon name="stats-chart-outline"></ion-icon>
+            </ion-tab-button>
+
+            <ion-tab-button tab="social" routerLink="/social">
+                <ion-icon name="people-outline"></ion-icon>
+            </ion-tab-button>
+        </ion-tab-bar>
+    </ion-tabs>
+</ion-app>

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

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+import {addIcons} from 'ionicons';
+import {homeOutline, peopleOutline, chatbubblesOutline, statsChartOutline} from 'ionicons/icons';
+
+addIcons({
+    'home-outline': homeOutline,
+    'people-outline': peopleOutline,
+    'chatbubbles-outline': chatbubblesOutline,
+    'stats-chart-outline': statsChartOutline
+});
+
+@Component({
+    selector: 'app-navbar',
+    templateUrl: './navbar.component.html',
+    styleUrls: ['./navbar.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class NavbarComponent {
+}

src/app/pages/groups/groups.component.html

@@ -1,3 +0,0 @@
-<p>
-    groups works!
-</p>

src/app/pages/groups/groups.component.ts

@@ -1,16 +1,10 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
     selector: 'app-groups',
     templateUrl: './groups.component.html',
     styleUrls: ['./groups.component.scss'],
+    imports: []
 })
-export class GroupsComponent implements OnInit {
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
-
+export class GroupsComponent {
 }

src/app/pages/home/home.component.html

@@ -1,3 +0,0 @@
-<p>
-    home works!
-</p>

src/app/pages/home/home.component.ts

@@ -1,9 +1,10 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss'],
+    imports: []
 })
 export class HomeComponent {
 }

src/app/pages/ranking/ranking.component.html

@@ -1,3 +0,0 @@
-<p>
-    ranking works!
-</p>

src/app/pages/ranking/ranking.component.ts

@@ -1,16 +1,10 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
     selector: 'app-ranking',
     templateUrl: './ranking.component.html',
     styleUrls: ['./ranking.component.scss'],
+    imports: []
 })
-export class RankingComponent implements OnInit {
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
-
+export class RankingComponent {
 }

src/app/pages/social/social.component.html

@@ -1,3 +0,0 @@
-<p>
-    friends works!
-</p>

src/app/pages/social/social.component.ts

@@ -1,16 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
     selector: 'app-social',
     templateUrl: './social.component.html',
     styleUrls: ['./social.component.scss'],
+    imports: []
 })
-export class SocialComponent implements OnInit {
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
+export class SocialComponent {
 
 }

src/index.html

@@ -6,6 +6,7 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="BeReady.png">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
 </head>
 <body>
 <app-root></app-root>