<mat-drawer-container class="example-container" autosize>
  <p>
    <mat-toolbar id='nav' color="primary" class="flex-container">
      
      <div class="flex-item">
        <button mat-icon-button class="example-icon" aria-label="" [routerLink]="['/home']">
          <mat-icon>home</mat-icon>
        </button>
        <span>Home</span>
        <span class="example-spacer"></span>      
      </div>

      <div class="flex-item">
        <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
          <mat-icon>person_pin</mat-icon>
        </button>
        <button mat-icon-button class="" aria-label="" (click)="openLogoutDialog()">
          <mat-icon>logout</mat-icon>
        </button>
      </div>
    </mat-toolbar>
    <mat-grid-list cols={{calColCount()}} rowHeight="2:1" [gutterSize]="'10px'" style="padding: 10px;">
      <mat-grid-tile
          *ngFor="let tile of projects"
          [colspan]=1
          [rowspan]=1>
        <mat-card class="mat-card-css">
          <mat-card-title>{{tile.pname}}</mat-card-title>
          <mat-card-content>
            <p>{{tile.description}}</p>
            <p>{{tile.content}}</p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button [routerLink]="['/project']" [state]="{id:tile.pid, name: tile.pname}">Open</button>
          </mat-card-actions>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list> 
  </p>
</mat-drawer-container>