Add menu background

projects/common/src/fm/components/app/app.component.html

@@ -9,7 +9,8 @@
   </nav>
   <div class="body">
     <router-outlet></router-outlet>
-  </div>
+  </div>  
+  <fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
   <fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
     <div class="container-fluid">
       <div class="body">

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

@@ -0,0 +1,3 @@
+<div class="menu-background" [ngClass]="{'show':visible}">
+
+</div>

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

@@ -0,0 +1,17 @@
+.menu-background {
+    display: block;
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    opacity: 0;
+    background-color: #000000;
+    transition: opacity 0s ease-out 1s;
+    pointer-events: none;
+}
+
+.menu-background.show {
+    pointer-events: all;
+    opacity: 0.3;
+}

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

@@ -0,0 +1,23 @@
+import { Component, OnInit,Input } from '@angular/core';
+import { Store, Action } from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as  commonActions  from '../../actions/app-common.actions';
+
+@Component({
+    selector: 'fm-menu-background',
+    templateUrl: './menu-background.component.html',
+    styleUrls: ['./menu-background.component.scss'],
+})
+export class MenuBackgroundComponent implements OnInit {
+    @Input() visible:boolean = false;
+    constructor(private store: Store<appReducers.State>) { }
+
+    ngOnInit() { }
+
+    handleOnClick(event:MouseEvent) {
+        if(this.visible) {
+            this.store.dispatch(new commonActions.SetMenuVisible(false));
+            event.stopPropagation();
+        }
+    }
+}