Add Settings Popup

src/app/features/header-menu/header-menu.html

@@ -1,6 +1,6 @@
 <div class="menu-left">
   <div class="brand" [routerLink]="['/']">
-    <img src="/logo_inverted.svg" alt="logo"/>
+    <img ngSrc="/logo_inverted.svg" alt="logo" height="20" width="59.52" />
     <span><strong>ADOFAI Editor Forum</strong></span>
   </div>
 
@@ -15,5 +15,5 @@
   <span class="dummy-link"><strong>Login</strong></span>
   <span class="dummy-link">Signup</span>
 
-  <span class="material-symbols-outlined icon-40 settings">settings</span>
+  <span class="material-symbols-outlined icon-40 settings" (click)="onSettingsClick()">settings</span>
 </div>

src/app/features/header-menu/header-menu.scss

@@ -81,5 +81,16 @@
     flex-grow: 1;
     justify-content: flex-end;
     padding: 12px 20px;
+
+    .settings {
+      position: relative;
+      z-index: 10;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+
+      &:hover {
+        transform: rotate(30deg);
+      }
+    }
   }
 }

src/app/features/header-menu/header-menu.ts

@@ -1,10 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { NgOptimizedImage } from '@angular/common';
+import { PopupService } from '../../services/popup.service';
+import { SettingsPopup } from '../settings/settings';
 
 @Component({
   selector: 'header-menu',
-  imports: [RouterLink],
+  imports: [RouterLink, NgOptimizedImage],
   templateUrl: './header-menu.html',
   styleUrl: './header-menu.scss',
 })
-export class HeaderMenu {}
+export class HeaderMenu {
+  private popupService = inject(PopupService);
+
+  onSettingsClick() {
+    console.log('HeaderMenu: Settings clicked');
+    this.popupService.open(SettingsPopup);
+  }
+}