FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
projects/common/src/fm/components/app/app.component.html
View File

@ -1,10 +1,7 @@
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}"> <div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <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> <button type="button" class="btn btn-light" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
<ul class="navbar-nav"> <router-outlet class="logo" [routerLink]="['/']" name="logo"></router-outlet>
<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>
<router-outlet name="menu"></router-outlet> <router-outlet name="menu"></router-outlet>
</nav> </nav>
<div class="body"> <div class="body">

3
projects/common/src/fm/components/app/app.component.scss
View File

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

3
projects/common/src/fm/components/app/app.component.ts
View File

@ -136,7 +136,8 @@ export class AppComponent implements OnInit, OnDestroy {
event.stopPropagation(); event.stopPropagation();
} }
handleToggleMenu(event) { handleToggleMenu(event:MouseEvent) {
event.stopPropagation();
this.store.dispatch(new commonActions.ToggleMenu()); this.store.dispatch(new commonActions.ToggleMenu());
} }
} }

2
src/app/logo/logo.component.ts
View File

@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-logo', selector: 'app-logo',
template: '<span><img src="/images/farmmapslogo.png" /></span>', 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 { export class LogoComponent implements OnInit {