Implement menu button
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
This commit is contained in:
parent
46d0f8c060
commit
ab99f6722c
@ -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">
|
||||
|
@ -75,3 +75,6 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
|
||||
background-color: rgb(245,245,245);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
@ -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());
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user