<mat-drawer-container class="example-container" autosize>
  <!--
  <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
    <div class="flex-item nav-btns">
      <h1 style="justify-content: center;">Go To</h1>
    </div>
    <div class="flex-item nav-btns">
    <button color="primary" style="width: 100%;"class="" [routerLink]="['/github']" mat-raised-button>
      Github
    </button>
    </div>
    <div class="flex-item nav-btns">
    <button color="primary" style="width: 100%;" [routerLink]="['/jira']" mat-raised-button>
      Jira
    </button>
    </div>
    <div class="flex-item nav-btns">
    <button color="primary" style="width: 100%;"class="" [routerLink]="['/confluence']" mat-raised-button>
      Confluence
    </button>
    </div>
    <div class="flex-item nav-btns">
    <button color="primary" style="width: 100%;"class="" [routerLink]="['/slack']" mat-raised-button>
      Slack
    </button>
    </div>
  </mat-drawer>
  -->
  <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>