From ab99f6722cd76183b1f021ff980395b78032ffec Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Wed, 8 Jan 2020 14:23:24 +0100
Subject: [PATCH] Implement menu button

---
 projects/common/src/fm/components/app/app.component.html | 7 ++-----
 projects/common/src/fm/components/app/app.component.scss | 3 +++
 projects/common/src/fm/components/app/app.component.ts   | 3 ++-
 src/app/logo/logo.component.ts                           | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html
index 29657b0..303a495 100644
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@@ -1,10 +1,7 @@
 <div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
-    <ul class="navbar-nav">
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
-    </ul>
+    <button type="button" class="btn btn-light" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
+    <router-outlet class="logo" [routerLink]="['/']" name="logo"></router-outlet>
     <router-outlet name="menu"></router-outlet>
   </nav>
   <div class="body">
diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss
index efbeda2..f9a8172 100644
--- a/projects/common/src/fm/components/app/app.component.scss
+++ b/projects/common/src/fm/components/app/app.component.scss
@@ -75,3 +75,6 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
   background-color: rgb(245,245,245);
 }
 
+.logo {
+  margin-left: 1rem;
+}
diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts
index 78c15d2..b315b7b 100644
--- a/projects/common/src/fm/components/app/app.component.ts
+++ b/projects/common/src/fm/components/app/app.component.ts
@@ -136,7 +136,8 @@ export class AppComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }  
 
-  handleToggleMenu(event) {
+  handleToggleMenu(event:MouseEvent) {
+    event.stopPropagation();
     this.store.dispatch(new commonActions.ToggleMenu());
   }
 }
diff --git a/src/app/logo/logo.component.ts b/src/app/logo/logo.component.ts
index 7465c7d..2394f9f 100644
--- a/src/app/logo/logo.component.ts
+++ b/src/app/logo/logo.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-logo',
   template: '<span><img src="/images/farmmapslogo.png" /></span>',
-  styles:['img {width:100%;align-self:center;}']
+  styles:['img {max-height:100%;max-width:100%;align-self:center;}']
 })
 export class LogoComponent implements OnInit {