src/app/app.html

<div class="navigation-container">
  <div class="nav-content">
    <img src="logo.png" alt="PyTrade Logo" class="logo-img" routerLink="/">
    <h1 class="logo-title">PY-TRADE</h1>
    <div style="display: flex; gap: 2vw; margin-left: 47vw;align-self:flex-start;">
      <p class="menu-item" routerLink="/dashboard">Markets</p>
      <p class="menu-item" routerLink="/community">Community</p>
      <p class="menu-item" routerLink="/chatbot">Trading Assistant</p>
    </div>

    <div class="user-avatar"
         (mouseenter)="showDropDown()"
         (mouseleave)="hideDropDown()">
      <ng-container *ngIf="auth.isAuthenticated(); else anonAvatar">
        <div class="avatar-circle" [attr.aria-label]="displayName()">{{ avatarInitial() }}</div>
      </ng-container>
      <ng-template #anonAvatar>
        <img src="https://cdn-icons-png.flaticon.com/512/847/847969.png" alt="User Image">
      </ng-template>

      <ul class="avatar-menu" *ngIf="isShowDropDown" role="menu">
        <ng-container *ngIf="auth.isAuthenticated(); else guestMenu">
          <li class="menu-header" aria-disabled="true">Hello, {{ displayName() }}</li>
          <li role="menuitem" (click)="logout()">Logout</li>
        </ng-container>
        <ng-template #guestMenu>
          <!-- Call the UI service directly and close the dropdown -->
          <li role="menuitem" (click)="authUi.openSignup(); isShowDropDown = false">Sign Up</li>
          <li role="menuitem" (click)="authUi.openSignin(); isShowDropDown = false">Sign In</li>
        </ng-template>
      </ul>
    </div>
  </div>
</div>

<!-- Bind to AuthUiService signals and correct the output event name -->
<app-signup-modal [open]="authUi.signupOpen()"
                  (close)="authUi.closeSignup()"
                  (submitted)="handleSignup($event)">
</app-signup-modal>

<app-signin-modal [open]="authUi.signinOpen()"
                  (close)="authUi.closeSignin()"
                  (submitted)="handleSignin($event)">
</app-signin-modal>

<router-outlet></router-outlet>