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

<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <button type="button" class="btn btn-outline-light" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
    <router-outlet name="menu" class="ml-4"></router-outlet>
  </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"><router-outlet name="side-panel-logo"></router-outlet></div>
          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa 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">
    <fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
  </div>
  <div class="healthstatus-container online" [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>