Add app-menu

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

@@ -0,0 +1,9 @@
+<div>
+    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user}">
+        <span i18n-title title="Apps"><i class="fa fa-bars" aria-hidden="true"></i></span>
+        <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
+            <router-outlet name="app-menu"></router-outlet>            
+       </div>
+    </div>
+</div>
+

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

@@ -0,0 +1,48 @@
+.menu-button {
+    background-color: gray;  
+    display: inline-block;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    text-align: center;
+    font-size: 1rem;
+    position: relative;
+}
+
+div.menu-button > span {
+    color:white;
+}
+
+.menu {
+    max-height: 100vh;
+    //transition: max-height 0.2s;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0,0,0,.3);
+    position: absolute;
+    top: 3rem;
+    right:0;
+    background-color: #fff;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+}
+
+.card {      
+    padding:0.5rem;
+    min-width: 10rem;          
+}
+
+.card-body {
+    text-align: left;
+}
+
+.hidden {
+    max-height: 0;   
+}
+
+.menu.hidden {
+    padding: 0;
+}
+
+.menu-button.hidden {
+    overflow: hidden;
+}

projects/common/src/fm/components/app-menu/app-menu.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppMenuComponent } from './app-menu.component';
+
+describe('AppMenuComponent', () => {
+  let component: AppMenuComponent;
+  let fixture: ComponentFixture<AppMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AppMenuComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+
+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-app-menu',
+  templateUrl: './app-menu.component.html',
+  styleUrls: ['./app-menu.component.scss']
+})
+export class AppMenuComponent implements OnInit {
+
+  @Input() user:IUser;
+  @Input() showMenu:boolean;
+
+  constructor(private store: Store<appReducers.State>) { }
+
+  ngOnInit(): void {
+  }
+
+  toggle(event:MouseEvent) {
+    event.stopPropagation();
+    this.store.dispatch(new appActions.ToggleAppMenu());
+  } 
+
+}