Implement menu button
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good

This commit is contained in:
Willem Dantuma 2020-01-08 14:23:24 +01:00
parent 46d0f8c060
commit ab99f6722c
4 changed files with 8 additions and 7 deletions

View File

@ -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">

View File

@ -75,3 +75,6 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
background-color: rgb(245,245,245);
}
.logo {
margin-left: 1rem;
}

View File

@ -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());
}
}

View File

@ -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 {