FarmMapsLib/projects/common/src/fm/components/app/app.component.html

47 lines
2.7 KiB
HTML

<div class="app fullscreen" (click)="handleClick()" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
<nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
<div class="container-fluid p-3 justify-content-start">
<div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div>
<button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
<router-outlet name="menu" class="ms-4"></router-outlet>
<div class="collapse navbar-collapse pageonly">
<a class="btn btn-primary ms-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
<span *ngIf="(user|async)==null" i18n>Sign in</span>
<span *ngIf="(user|async)!=null" i18n>To app</span>
</a>
</div>
</div>
</nav>
<div class="body">
<router-outlet></router-outlet>
</div>
<fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
<fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
<div class="container-fluid">
<div class="body">
<div class="d-flex flex-row">
<div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome()"><router-outlet name="side-panel-logo"></router-outlet></div>
<div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
</div>
<div class="d-flex flex-column cards">
<router-outlet name="side-panel-menu"></router-outlet>
</div>
</div>
</div>
</fm-side-panel>
<ng-container *ngIf="showUploadProgress">
<fm-resumable-file-upload></fm-resumable-file-upload>
</ng-container>
<div class="user-menu apponly">
<fm-help-menu [user]="user|async" [showMenu]="helpMenuVisible|async"></fm-help-menu>
<fm-notification-menu [user]="user|async" [unread]="unreadNotifications|async" [showMenu]="notificationMenuVisible|async"></fm-notification-menu>
<fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
<fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
</div>
<div class="healthstatus-container online apponly" [ngClass]="{'online' :(isOnline|async)}">
<div class="healthstatus alert alert-danger m-0" >
<span i18n>Not connected, make sure your device has an active internet connection</span>
</div>
</div>
</div>