add dropdown logout

client/src/app/core/layout/header.component.html

@@ -22,104 +22,38 @@
             {{ user.username }}
           </span>
         </div>
-        <img
+        <div class="relative">
-          class="h-16 rounded-full"
+          <img
-          src="{{ user.image }}"
+            class="h-16 rounded-full cursor-pointer"
-          loading="lazy"
+            src="{{ user.image }}"
-          alt="profile picture"
+            loading="lazy"
-        />
+            alt="profile picture"
+            (click)="toggleDropdown()"
+            [class.open]="isMenuOpen"
+          />
+
+          <!-- Dropdown Items -->
+          <div
+            class="absolute right-0 w-40 mt-2 py-2 bg-white rounded-md shadow-xl z-20"
+            *ngIf="isMenuOpen"
+          >
+            <ul>
+              <li>
+                <!-- logout button -->
+                <button
+                  class="flex items-center w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                  (click)="logout()"
+                >
+                  Logout
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
       <ng-template #login_button>
         <app-google-button></app-google-button>
       </ng-template>
-      <div
-        class="relative inline-block text-left text-gray-800"
-        (click)="closeMenu()"
-      >
-        <div>
-          <span class="rounded-md shadow-sm">
-            <button
-              (click)="isMenuOpen = !isMenuOpen"
-              type="button"
-              class="inline-flex items-center justify-between w-full rounded-md border border-gray-300 h-10 px-4 py-4 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-800 transition ease-in-out duration-150 btn-focus"
-              id="options-menu"
-              [attr.aria-haspopup]="isMenuOpen"
-              [attr.aria-expanded]="isMenuOpen"
-            >
-              <span> {{ label }} </span>
-              <img
-                src="https://s.svgbox.net/hero-solid.svg?ic=chevron-down&fill=grey-800"
-                class="-mr-1 ml-2 h-5 w-5"
-              />
-            </button>
-          </span>
-        </div>
-        <ng-container *ngIf="isMenuOpen">
-          <div
-            class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg text-sm overflow-hidden border z-20"
-          >
-            <div
-              class="rounded-md bg-white shadow-xs"
-              role="menu"
-              [attr.aria-orientation]="'vertical'"
-              [attr.aria-labelledby]="'options-menu'"
-            >
-              <div>
-                <div class="bg-gray-100 p-4 flex items-center">
-                  <div class="w-full">
-                    <img
-                      class="h-8 w-8 rounded-full mb-2"
-                      src="https://fayazz.co/fayaz.jpg"
-                      alt="avatar"
-                    />
-                    <p class="font-semibold text-base">Fayaz Ahmed</p>
-                    <button
-                      class="flex items-center justify-between w-full focus:outline-none"
-                    >
-                      <p class="text-gray-600">fayaz@email.com</p>
-                      <img
-                        src="https://s.svgbox.net/hero-solid.svg?ic=cog&fill=grey-700"
-                        class="h-4 w-4"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div class="border-t border-gray-100"></div>
-              <div class="py-1">
-                <a routerLink="/" class="p-4 flex items-center space-x-2">
-                  <img
-                    src="https://s.svgbox.net/hero-outline.svg?ic=currency-rupee"
-                    class="h-6 w-6"
-                  />
-                  <span> Transaction History </span>
-                </a>
-                <a routerLink="/" class="p-4 flex items-center space-x-2">
-                  <img
-                    src="https://s.svgbox.net/hero-outline.svg?ic=heart"
-                    class="h-6 w-6"
-                  />
-                  <span> Favourites </span>
-                </a>
-              </div>
-              <div class="border-t border-gray-100"></div>
-              <div class="py-1">
-                <a
-                  routerLink="/"
-                  (click)="isMenuOpen = false"
-                  class="p-4 flex items-center space-x-2"
-                >
-                  <img
-                    src="https://s.svgbox.net/hero-outline.svg?ic=logout"
-                    class="h-6 w-6"
-                  />
-                  <span> Logout </span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-      </div>
     </div>
   </div>
 </nav>

client/src/app/core/layout/header.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe, NgIf } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { User } from '../models/user.model';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
 import { UserService } from '../services/user.service';
@@ -14,7 +14,6 @@ export class HeaderComponent implements OnInit {
   user: User | null = null;
   date: Date = new Date();
   isMenuOpen = false;
-  label = 'Menu';
 
   constructor(private userService: UserService) {}
 
@@ -22,7 +21,11 @@ export class HeaderComponent implements OnInit {
     this.userService.currentUser.subscribe((user) => (this.user = user));
   }
 
-  closeMenu(): void {
+  toggleDropdown() {
-    this.isMenuOpen = false;
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  logout(): void {
+    this.userService.logout();
   }
 }