fix: dropdown profile menu animation

when switching from authentication route to main route, profile menu animation appears even if
property is false

fix #11

Author: lannodev

src/app/app.component.ts

@@ -3,7 +3,6 @@ import { ThemeService } from './core/services/theme.service';
 import { RouterOutlet } from '@angular/router';
 import { NgClass } from '@angular/common';
 import { ResponsiveHelperComponent } from './shared/components/responsive-helper/responsive-helper.component';
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',

src/app/modules/layout/components/navbar/profile-menu/profile-menu.component.html

@@ -4,18 +4,14 @@
     <span class="sr-only">Open user menu</span>
     <img
       clickOutside
-      (clickOutside)="isMenuOpen = false"
+      (clickOutside)="isOpen = false"
       class="h-9 w-9 rounded-md"
       src="https://avatars.githubusercontent.com/u/12519008?v=4"
       alt="" />
   </button>
   <!-- Dropdown -->
   <div
-    [ngClass]="
-      isMenuOpen
-        ? 'pointer-events-auto scale-100 animate-fade-in-up opacity-100 duration-200'
-        : 'pointer-events-none scale-95 opacity-0 duration-100 ease-in'
-    "
+    [@openClose]="isOpen ? 'open' : 'closed'"
     class="absolute right-0 mt-2 w-60 origin-top-right transform rounded-md bg-background py-4 shadow-custom ring-1 ring-transparent ring-opacity-5 transition focus:outline-none">
     <div class="flext-row flex items-center px-4 pb-4">
       <div class="w-10 shrink-0">

src/app/modules/layout/components/navbar/profile-menu/profile-menu.component.ts

@@ -4,16 +4,39 @@ import { NgClass } from '@angular/common';
 import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { ThemeService } from '../../../../../core/services/theme.service';
+import { trigger, state, style, animate, transition } from '@angular/animations';
 
 @Component({
   selector: 'app-profile-menu',
   templateUrl: './profile-menu.component.html',
   styleUrls: ['./profile-menu.component.scss'],
   standalone: true,
   imports: [ClickOutsideDirective, NgClass, RouterLink, AngularSvgIconModule],
+  animations: [
+    trigger('openClose', [
+      state(
+        'open',
+        style({
+          opacity: 1,
+          transform: 'translateY(0)',
+          visibility: 'visible',
+        }),
+      ),
+      state(
+        'closed',
+        style({
+          opacity: 0,
+          transform: 'translateY(-20px)',
+          visibility: 'hidden',
+        }),
+      ),
+      transition('open => closed', [animate('0.2s')]),
+      transition('closed => open', [animate('0.2s')]),
+    ]),
+  ],
 })
 export class ProfileMenuComponent implements OnInit {
-  public isMenuOpen = false;
+  public isOpen = false;
   public profileMenu = [
     {
       title: 'Your Profile',
@@ -70,7 +93,7 @@ export class ProfileMenuComponent implements OnInit {
   ngOnInit(): void {}
 
   public toggleMenu(): void {
-    this.isMenuOpen = !this.isMenuOpen;
+    this.isOpen = !this.isOpen;
   }
 
   toggleThemeMode() {

src/main.ts

@@ -1,30 +1,33 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-
-import { environment } from './environments/environment'
+import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
 import { AppRoutingModule } from './app/app-routing.module';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 if (environment.production) {
-    enableProdMode()
-    //show this warning only on prod mode
-    if (window) {
-        selfXSSWarning();
-    }
+  enableProdMode();
+  //show this warning only on prod mode
+  if (window) {
+    selfXSSWarning();
+  }
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [importProvidersFrom(BrowserModule, AppRoutingModule)]
-})
-    .catch((err) => console.error(err))
+  providers: [importProvidersFrom(BrowserModule, AppRoutingModule), provideAnimations()],
+}).catch((err) => console.error(err));
 
 function selfXSSWarning() {
-    setTimeout(() => {
-        console.log('%c** STOP **', 'font-weight:bold; font: 2.5em Arial; color: white; background-color: #e11d48; padding-left: 15px; padding-right: 15px; border-radius: 25px; padding-top: 5px; padding-bottom: 5px;');
-        console.log(
-            `\n%cThis is a browser feature intended for developers. Using this console may allow attackers to impersonate you and steal your information sing an attack called Self-XSS. Do not enter or paste code that you do not understand.`, 'font-weight:bold; font: 2em Arial; color: #e11d48;'
-        );
-    });
+  setTimeout(() => {
+    console.log(
+      '%c** STOP **',
+      'font-weight:bold; font: 2.5em Arial; color: white; background-color: #e11d48; padding-left: 15px; padding-right: 15px; border-radius: 25px; padding-top: 5px; padding-bottom: 5px;',
+    );
+    console.log(
+      `\n%cThis is a browser feature intended for developers. Using this console may allow attackers to impersonate you and steal your information sing an attack called Self-XSS. Do not enter or paste code that you do not understand.`,
+      'font-weight:bold; font: 2em Arial; color: #e11d48;',
+    );
+  });
 }