added logout to the page

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

@@ -23,4 +23,10 @@
       Profile
     </li>
   </ul>
+  <img
+    class="logout"
+    (click)="logout()"
+    src="../../../../assets/logout.svg"
+    alt="logout"
+  />
 </nav>

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

@@ -48,6 +48,16 @@
     cursor: pointer;
   }
 }
+
+.logout {
+  width: 20px;
+  height: 20px;
+  color: $inactive-color;
+  cursor: pointer;
+  &:hover {
+    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
+  }
+}
 @media (max-width: 768px) {
   .header {
     justify-content: space-between;

src/app/shared/components/header/header.component.ts

@@ -1,5 +1,7 @@
 import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
 import { Router, RouterModule } from '@angular/router';
+import { SnackbarService } from '../snackbar/snackbar.service';
 
 @Component({
   selector: 'app-header',
@@ -11,9 +13,20 @@ import { Router, RouterModule } from '@angular/router';
 export class HeaderComponent {
 
   private readonly router: Router = inject(Router);
+  private readonly auth: Auth = inject(Auth);
+  private readonly snackbarService: SnackbarService = inject(SnackbarService);
 
   toHome() {
     this.router.navigateByUrl('/app/feed');
   }
 
+  async logout() {
+    try {
+      await this.auth.signOut();
+      this.router.navigateByUrl('/sign-in');
+    } catch (error) {
+      this.snackbarService.show('Logout Failed');
+    }
+  }
+
 }

src/app/sign-in/sign-in.component.ts

@@ -45,7 +45,7 @@ export class SignInComponent {
       try {
         const { email, password } = this.loginForm.value;
         await signInWithEmailAndPassword(this.auth, email, password);
-        this.snackbarService.show('Signed In Successfully', 5000);
+        this.snackbarService.show('Signed In Successfully', 2500);
         this.router.navigateByUrl('app/feed');
       } catch (error: any) {
         this.ERROR_CODE = error.code;

src/app/sign-up/sign-up.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { Auth, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithPopup, updateProfile, user } from '@angular/fire/auth';
+import { Auth, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithPopup, updateProfile } from '@angular/fire/auth';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { FirestoreService } from '../shared/services/firestore/firestore.service';