<div fxLayout="row wrap">
  <div fxFlex="100" fxFlex.gt-md="300px" fxFlex.gt-sm="50">
    <mat-card class="profile-sidebar mb-16 pb-0">
      <div class="propic text-center">
        <img src="assets/images/sq-face-220.jpg" alt="">
      </div>
      <div class="profile-title text-center mb-16">
        <div class="main-title">{{(user | async)?.displayName}}</div>
        <div class="subtitle mb-8">Big Data Expert</div>
        <div class="text-muted">Hi I'm Jhone, sit amet consectetur adipisicing elit. Aperiam repellendus nam perspiciatis.</div>
      </div>
      <div class="profile-actions mb-16" fxLayoutAlign="center center">
        <button mat-raised-button color="primary">Message</button>
        <span fxFlex="8px"></span>
        <button mat-raised-button color="accent">Follow</button>
      </div>
      <div class="profile-nav">
        <mat-nav-list>
          <mat-list-item routerLink="/profile/overview" routerLinkActive="list-item-active">
            <mat-icon>home</mat-icon>
            Overview
          </mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item routerLink="/profile/settings" routerLinkActive="list-item-active">
            <mat-icon>settings</mat-icon>
            Settings
          </mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item routerLink="/profile/blank" routerLinkActive="list-item-active">
            <mat-icon>content_paste</mat-icon>
            Blank
          </mat-list-item>
        </mat-nav-list>
      </div>
    </mat-card>

    <!-- Chart grid -->
    <mat-card class="default">
      <mat-card-title>Summary</mat-card-title>
      <mat-card-content>
          <div fxLayout="row wrap" class="doughnut-grid text-center">
              <div fxFlex="50" class="doughnut-grid-item mat-bg-primary">
                  <canvas 
                  baseChart
                  class="chart"
                  [data]="doughnutChartData1"
                  [options]="doughnutOptions"
                  [colors]="doughnutChartColors"
                  [chartType]="doughnutChartType"></canvas>
                  <small>Space: {{data1}}/{{total1}} GB</small>
            </div>
            <div fxFlex="50" class="doughnut-grid-item light-gray">
                <canvas  
                baseChart 
                class="chart"
                [data]="doughnutChartData2"
                [options]="doughnutOptions"
                [colors]="doughnutChartColors"
                [chartType]="doughnutChartType"></canvas>
                <small>Sales: 450</small>
          </div>
          <div fxFlex="50" class="doughnut-grid-item light-gray">
              <canvas  
              baseChart 
              class="chart"
              [data]="doughnutChartData2"
              [options]="doughnutOptions"
              [colors]="doughnutChartColors"
              [chartType]="doughnutChartType"></canvas>
              <small>Spent: $500</small>
        </div>
        <div fxFlex="50" class="doughnut-grid-item mat-bg-primary">
            <canvas 
            baseChart 
            class="chart"
            [data]="doughnutChartData2"
            [options]="doughnutOptions"
            [colors]="doughnutChartColors"
            [chartType]="doughnutChartType"></canvas>
            <small>Follower: 2000</small>
      </div>
        </div>
      </mat-card-content>
    </mat-card>
    <!-- Contact Information -->
    <mat-card class="default">
      <mat-card-title>Contact Information</mat-card-title>
      <mat-card-content class="pt-0">
        <mat-list>
          <mat-list-item><mat-icon class="mr-16">public</mat-icon> www.mhrafi.com</mat-list-item>
          <mat-list-item><mat-icon class="mr-16">email</mat-icon> example@gmail.com</mat-list-item>
          <mat-list-item><mat-icon class="mr-16">phone</mat-icon> 8801822778800</mat-list-item>
          <mat-list-item><mat-icon class="mr-16">add_location</mat-icon> SUST, Sylhet, BD</mat-list-item>
        </mat-list>
      </mat-card-content>
    </mat-card>
  </div>

<!-- Profile Views -->
  <div fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="calc(100% - 300px)">
    <router-outlet></router-outlet>
  </div>
</div>