<mat-toolbar color="primary">
  <mat-toolbar-row>
    <a mat-icon-button routerLink="/" *ngIf="userData != null && userData.logged == 'none'" #tooltip="matTooltip" matTooltip="Úvodní stránka">
      <mat-icon>home</mat-icon>
    </a>
    <span id="main-toolbar-title">Informační systém Orientačních dnů</span>
    <span class="example-spacer"></span>
    <!-- <span *ngIf="userData != null && userData.logged == 'none'">
      <a mat-icon-button routerLink="{{pages.schoolLogin.path}}" #tooltip="matTooltip" matTooltip="Přihlášení pro školy">
        <mat-icon>school</mat-icon>
      </a>
      <a mat-icon-button routerLink="{{pages.instructorLogin.path}}" #tooltip="matTooltip" matTooltip="Přihlášení pro instruktory">
        <mat-icon>person</mat-icon>
      </a>
    </span> -->
    <span *ngIf="userData != null">
      <span class="logged-user" *ngIf="userData.logged == 'instructor' && userData.instructor != null">
        <mat-icon class="icon">person</mat-icon>
        <span class="aligned-with-icon">{{userData.instructor.firstname}} {{userData.instructor.lastname}}</span>
      </span>
      <span class="logged-user" *ngIf="userData.logged == 'school' && userData.school != null">
        <mat-icon class="icon">school</mat-icon>
        <span class="aligned-with-icon">{{userData.school.name}}</span>
      </span>
      <button mat-icon-button class="example-icon" #tooltip="matTooltip" matTooltip="Odhlásit se" *ngIf="userData.logged != 'none'" (click)="logOut()">
        <mat-icon>logout</mat-icon>
      </button>
    </span>
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container class="example-container" autosize [class.example-is-mobile]="mobileQuery.matches">
  <mat-sidenav #drawer mode="side" [mode]="mobileQuery.matches ? 'over' : 'side'"
              [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" [opened]="menuOn" (closedStart)="menuOn = false"> 
      <div *ngIf="menuItems != null">
        <div class="sidenav-top-button-bar align-right">
            <button type="button" mat-button color="primary" (click)="drawer.toggle()" *ngIf="menuOn"><mat-icon>menu</mat-icon></button>
        </div>
        <div class="example-sidenav">
          <mat-nav-list *ngFor="let itemGroup of menuItems">
            <a mat-list-item *ngFor="let item of itemGroup" routerLink="{{item.path}}"><mat-icon color="accent" [fontSet]="item.outlined ? 'material-icons-outlined' : ''">{{item.icon}}</mat-icon> {{item.text}}</a>
          </mat-nav-list>
        </div>
    </div>
  </mat-sidenav>

  <mat-sidenav-content>
      <div class="sidenav-top-button-bar" *ngIf="menuEnabled">
          <button type="button" mat-button color="primary" (click)="drawer.toggle(); menuOn = !menuOn" *ngIf="!menuOn"><mat-icon>menu</mat-icon></button>
      </div>

    <div class="example-sidenav-content">
        
      <router-outlet></router-outlet>

    </div>
  </mat-sidenav-content>

</mat-sidenav-container>