Implement toggleaccountmenu action

projects/common/src/fm/components/user-menu/user-menu.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="user">
     <div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name">
         <span>{{getLetter()}}</span>
-        <div *ngIf="showMenu" class="card">           
+        <div  [ngClass]="{'hidden':!showMenu}" class="card">           
             <div class="card-body">
                 <div class="username">{{user.name}}</div>
                 <div><a href="#" (click)="logout($event)" i18n>logout</a></div>

projects/common/src/fm/components/user-menu/user-menu.component.scss

@@ -31,4 +31,8 @@ div.menu-button > span {
 
 .card-body {
     text-align: left;
+}
+
+.hidden {
+    display: none;
 }

projects/common/src/fm/components/user-menu/user-menu.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit,Input } from '@angular/core';
 import { OAuthService} from 'angular-oauth2-oidc'
 import { IUser } from '../../models/user';
+import {Store} from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as appActions from '../../actions/app-common.actions';
 
 @Component({
   selector: 'fm-user-menu',
@@ -10,9 +13,9 @@ import { IUser } from '../../models/user';
 export class UserMenuComponent implements OnInit {
 
   @Input() user:IUser;
-  public showMenu:boolean = false
+  @Input() showMenu:boolean;
 
-  constructor(private oauthService:OAuthService) { }
+  constructor(private oauthService:OAuthService, private store: Store<appReducers.State>) { }
 
   ngOnInit(): void {
   }
@@ -26,15 +29,9 @@ export class UserMenuComponent implements OnInit {
     this.oauthService.logOut();
   }
 
-  hide(event:MouseEvent) {
-    this.showMenu = false;
-  }
-
-  show(event:MouseEvent) {
-    this.showMenu=true;
-  }
 
   toggle(event:MouseEvent) {
-    this.showMenu=!this.showMenu;
-  }
+    event.stopPropagation();
+    this.store.dispatch(new appActions.ToggleAccountMenu());
+  } 
 }