Merge branches 'main' and 'main' of https://github.com/Poomipat-Ch/taobin_recipe_manager

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

@@ -22,14 +22,13 @@
             {{ user.username }}
           </span>
         </div>
-        <div class="relative">
+        <div class="relative" #dropdownMenu>
           <img
             class="h-16 rounded-full cursor-pointer"
             src="{{ user.image }}"
             loading="lazy"
             alt="profile picture"
             (click)="toggleDropdown()"
-            [class.open]="isMenuOpen"
           />
 
           <!-- Dropdown Items -->

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

@@ -1,5 +1,13 @@
 import { DatePipe, NgIf } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  OnInit,
+  ViewChild,
+} 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,15 +22,36 @@ export class HeaderComponent implements OnInit {
   user: User | null = null;
   date: Date = new Date();
   isMenuOpen = false;
+  @ViewChild('dropdownMenu') dropdownMenu: ElementRef | undefined;
 
-  constructor(private userService: UserService) {}
+  constructor(
+    private userService: UserService,
+    private changeDetector: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.userService.currentUser.subscribe((user) => (this.user = user));
   }
 
+  @HostListener('document:click', ['$event'])
+  handleDocumentClick(event: Event) {
+    if (!this.dropdownMenu) {
+      return;
+    }
+
+    const targetNode = event.target as Node;
+    if (this.dropdownMenu.nativeElement.contains(targetNode)) {
+      // Click occurred inside the dropdown, do nothing
+      return;
+    }
+
+    // Click occurred outside the dropdown, close it
+    this.isMenuOpen = false;
+  }
+
   toggleDropdown() {
     this.isMenuOpen = !this.isMenuOpen;
+    this.changeDetector.detectChanges();
   }
 
   logout(): void {