message: Adjusted flex for smaller sizes
diff: </span>
  <a mat-button routerLink="/basket"><i class="fas fa-shopping-cart fa-lg"></i> Your Basket</a>
  <a mat-button routerLink="/change-password"><i class="fas fa-user-secret fa-lg"></i> Change Password</a>
  - <a mat-button routerLink="/recycle"><i class="fas fa-recycle fa-lg"></i> Recycle</a>
  - <a mat-button routerLink="/track-order"><i class="fas fa-map-marker fa-lg"></i> Track Orders</a>
  + <a fxShow fxHide.lt-md="true" fxHide.xs="true" mat-button routerLink="/recycle"><i class="fas fa-recycle fa-lg"></i> Recycle</a>
  + <a fxShow fxHide.lt-md="true" fxHide.xs="true" mat-button routerLink="/track-order"><i class="fas fa-map-marker fa-lg"></i> Track Orders</a>
  </mat-toolbar-row>
  <mat-toolbar-row fxFlex="1 1 50%" fxLayoutGap="10%" fxLayoutGap.lt-md="25%" fxLayoutGap.xs="0" fxHide fxShow.lt-md="true" fxShow.xs="true" fxFlex="1 1 50%" fxLayoutGap="10%" fxLayoutGap.lt-md="5%" fxLayoutGap.xs="0">
  