NGO-DB/ndb-core

<!--
  ~     This file is part of ndb-core.
  ~
  ~     ndb-core is free software: you can redistribute it and/or modify
  ~     it under the terms of the GNU General Public License as published by
  ~     the Free Software Foundation, either version 3 of the License, or
  ~     (at your option) any later version.
  ~
  ~     ndb-core is distributed in the hope that it will be useful,
  ~     but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~     GNU General Public License for more details.
  ~
  ~     You should have received a copy of the GNU General Public License
  ~     along with ndb-core.  If not, see <http://www.gnu.org/licenses/>.
  -->

<!-- HEADER TOOLBAR -->
<mat-toolbar color="primary" class="ui-toolbar">
  <!-- Left items -->
  <div class="flex-row align-center">
    <span *ngIf="isLoggedIn() && sideNavMode === 'over'">
      <button mat-icon-button (click)="sideNav.toggle()">
        <fa-icon class="header-icon" icon="bars"></fa-icon>
      </button>
    </span>

    <a
      *ngIf="sideNavMode !== 'over'"
      [routerLink]="['']"
      class="header-title"
      angulartics2On="click"
      angularticsCategory="Navigation"
      angularticsAction="navbar_site_title_link"
    >
      {{ siteSettings.siteName }}
    </a>
  </div>

  <!--top right icons and search-->
  <div
    class="flex-row align-center flex-grow-1-3 justify-content-end gap-small"
  >
    <app-search
      class="hide-mobile full-width"
      *ngIf="isLoggedIn()"
    ></app-search>

    <app-sync-status></app-sync-status>

    <app-language-select
      *ngIf="siteSettings.displayLanguageSelect"
    ></app-language-select>
  </div>
</mat-toolbar>

<!-- MAIN NAVIGATION + CONTENT -->
<mat-sidenav-container (backdropClick)="closeSidenavOnMobile()" autosize>
  <mat-sidenav
    #sideNav
    *ngIf="isLoggedIn()"
    [autoFocus]="false"
    [mode]="sideNavMode"
    [opened]="sideNavMode === 'side'"
    class="sidenav-menu"
    disableClose
  >
    <div
      class="flex-column justify-space-between full-height overflow-y-hidden"
    >
      <app-display-img
        *ngIf="siteSettings.logo"
        [entity]="siteSettings"
        imgProperty="logo"
        class="site-logo"
      ></app-display-img>
      <app-navigation
        class="overflow-auto-y"
        (click)="closeSidenavOnMobile()"
      ></app-navigation>

      <div class="flex-grow"></div>

      <div class="flex-column">
        <app-setup-wizard-button></app-setup-wizard-button>

        <app-pwa-install></app-pwa-install>

        <div class="flex-row">
          <button
            (click)="closeSidenavOnMobile()"
            mat-button
            routerLink="user-account"
            i18n="Navigate to user profile page"
            class="footer-cell width-1-2"
          >
            <fa-icon icon="user"></fa-icon>
            Profile
          </button>

          <button
            mat-button
            (click)="logout()"
            i18n="Sign out of the app"
            class="footer-cell width-1-2"
          >
            <fa-icon icon="sign-out-alt"></fa-icon>
            Sign out
          </button>
        </div>

        <div class="flex-row">
          <button
            mat-icon-button
            class="footer-cell"
            routerLink="/support"
            (click)="closeSidenavOnMobile()"
          >
            <fa-icon icon="info-circle" class="info-icon"></fa-icon>
          </button>
          <button
            mat-button
            class="footer-cell full-width"
            style="height: 100%"
            (click)="version.showLatestChanges()"
          >
            <app-version #version></app-version>
          </button>
        </div>
      </div>
    </div>
  </mat-sidenav>

  <mat-sidenav-content class="sidenav-content">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

<app-primary-action *ngIf="isLoggedIn()"></app-primary-action>