#1 user logout, displaying the user email

src/app/app.routes.ts

@@ -1,18 +1,72 @@
+import { AuthGuard, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
 import { Routes } from '@angular/router';
 
 import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
 import { UserLoginComponent } from './user/user-login/user-login.component';
 import { UserRegisterComponent } from './user/user-register/user-register.component';
 
+const redirectUnauthorizedToLanding = () => redirectUnauthorizedTo(['/sign-in']);
+
 export const routes: Routes = [
-    { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
-    { path: 'sign-in', component: UserLoginComponent },
-    { path: 'sign-up', component: UserRegisterComponent },
-    { path: 'dashboard', component: DashboardComponent },
-    { path: 'add-expense', component: DashboardComponent },
-    { path: 'add-income', component: DashboardComponent },
-    { path: 'investments-calculator', component: DashboardComponent },
-    { path: 'reports', component: DashboardComponent },
-    { path: 'pending-requests', component: DashboardComponent },
-    { path: 'previous-requests', component: DashboardComponent },
+    {
+        path: '',
+        redirectTo: '/sign-in',
+        pathMatch: 'full',
+    },
+    {
+        path: 'sign-in',
+        component: UserLoginComponent,
+    },
+    {
+        path: 'sign-up',
+        component: UserRegisterComponent,
+    },
+    {
+        path: 'dashboard',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'add-expense',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'add-income',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'investments-calculator',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'reports',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'pending-requests',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'previous-requests',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
+    {
+        path: 'profile',
+        component: DashboardComponent,
+        canActivate: [AuthGuard],
+        data: { authGuardPipe: redirectUnauthorizedToLanding },
+    },
 ];

src/app/common/navbar/navbar.component.html

@@ -1,10 +1,50 @@
-<mat-toolbar color="primary">
-    <a routerLink="/dashboard" class="me-1"><h4>Lucra</h4></a>
-    <a routerLink="/dashboard" class="me-1" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Overview</a>
-    <a routerLink="/add-expense" class="me-1" routerLinkActive="active-link">Add expense</a>
-    <a routerLink="/add-income" class="me-1" routerLinkActive="active-link">Add income</a>
-    <a routerLink="/investments-calculator" class="me-1" routerLinkActive="active-link">Investments calculator</a>
-    <a routerLink="/reports" class="me-1" routerLinkActive="active-link">Reports</a>
-    <a routerLink="/pending-requests" class="me-1" routerLinkActive="active-link">Pending requests</a>
-    <a routerLink="/previous-requests" class="me-1" routerLinkActive="active-link">Previous requests</a>
-</mat-toolbar>
+<nav class="navbar fixed-top navbar-expand-lg nav-custom">
+    <div class="container">
+        <a class="navbar-brand" style="color: #ffffff" routerLink="/dashboard">
+            <img class="navbar-brand-image ms-1" src="/assets/logo/pie-chart.svg" alt="Website logo" />
+        </a>
+        <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse ms-2" id="navbarsDefault">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a routerLink="/dashboard" class="nav-link me-1" routerLinkActive="active-link">Overview</a>
+                </li>
+                <li class="nav-item">
+                    <a routerLink="/add-expense" class="nav-link me-1" routerLinkActive="active-link">Add expense</a>
+                </li>
+                <li class="nav-item">
+                    <a routerLink="/add-income" class="nav-link me-1" routerLinkActive="active-link">Add income</a>
+                </li>
+                <li class="nav-item">
+                    <a routerLink="/investments-calculator" class="nav-link me-1" routerLinkActive="active-link">Investments calculator</a>
+                </li>
+                <li class="nav-item">
+                    <a routerLink="/reports" class="nav-link me-1" routerLinkActive="active-link">Reports</a>
+                </li>
+                <li class="nav-item">
+                    <a routerLink="/pending-requests" class="nav-link me-1" routerLinkActive="active-link">Pending requests</a>
+                </li>
+                <li class="nav-item">
+                    <a routerLink="/previous-requests" class="nav-link me-1" routerLinkActive="active-link">Previous requests</a>
+                </li>
+            </ul>
+        </div>
+        <a *ngIf="loggedIn" class="nav-link ms-4" routerLink="/profile" routerLinkActive="active-link">
+            {{ getUsername() }}
+        </a>
+        <div *ngIf="loggedIn" class="row cursor-pointer" (click)="logout()">
+            <span class="material-icons me-2">logout</span>
+        </div>
+        <button
+            class="navbar-toggler hidden-sm-up me-1"
+            type="button"
+            (click)="isNavbarCollapsed = !isNavbarCollapsed"
+            data-target="#navbarsDefault"
+            aria-controls="navbarsDefault"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</nav>
+
+<div class="nav-offset"></div>

src/app/common/navbar/navbar.component.scss

@@ -3,6 +3,10 @@
     background-color: rgba(0, 123, 255, 0.34);
 }
 
+span {
+    color: #fff;
+}
+
 a {
     color: #fff;
     text-decoration: none;
@@ -15,3 +19,56 @@ a:hover {
     background-color: rgba(0, 123, 255, 0.34);
     border-color: #007bff;
 }
+
+.profile-dropdown {
+    display: none;
+    position: absolute;
+    right: 0;
+    background-color: #ffffff;
+    min-width: 160px;
+    z-index: 1;
+}
+
+.profile:hover .profile-dropdown {
+    display: block;
+    cursor: pointer;
+}
+
+.top-bar {
+    background-color: var(--bs-purple);
+}
+
+.navbar-brand-image {
+    height: 2.5rem;
+    width: auto;
+    object-fit: contain;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-custom {
+    background-color: var(--bs-purple);
+}
+
+nav {
+    font-weight: bold;
+}
+
+.nav-offset {
+    height: 5rem;
+}
+
+@media only screen and (max-width: 800px) {
+    .nav-offset {
+        height: 7rem;
+    }
+}
+
+.profile:hover .hide-name {
+    display: none;
+}
+
+.profile:hover .profile-dropdown {
+    display: block;
+    cursor: pointer;
+}

src/app/common/navbar/navbar.component.ts

@@ -1,14 +1,36 @@
-import { Component } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
 import { MatButton } from '@angular/material/button';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatToolbar } from '@angular/material/toolbar';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-navbar',
     standalone: true,
-    imports: [MatMenu, MatMenuItem, MatMenuTrigger, MatButton, MatToolbar, RouterLink, RouterLinkActive],
+    imports: [MatMenu, MatMenuItem, MatMenuTrigger, MatButton, MatToolbar, RouterLink, RouterLinkActive, NgbCollapse, NgIf],
     templateUrl: './navbar.component.html',
     styleUrl: './navbar.component.scss',
 })
-export class NavbarComponent {}
+export class NavbarComponent {
+    isNavbarCollapsed = true;
+
+    auth: Auth = inject(Auth);
+    router: Router = inject(Router);
+
+    logout() {
+        this.auth.signOut().then(() => {
+            this.router.navigate(['/sign-in']).then();
+        });
+    }
+
+    get loggedIn() {
+        return this.auth.currentUser !== null;
+    }
+
+    getUsername() {
+        return this.auth.currentUser?.email;
+    }
+}

src/styles.scss

@@ -12,3 +12,19 @@ body {
     margin: 0;
     font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
+
+simple-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+//noinspection HtmlDeprecatedTag
+mat-spinner {
+    margin: 3rem auto;
+    display: block;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}