Add Menu header

src/app/app-material.module.ts

@@ -10,6 +10,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatSelectModule } from '@angular/material/select';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatMenuModule } from '@angular/material/menu';
 
 @NgModule( {
   exports: [
@@ -26,6 +27,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
     MatSelectModule,
     MatTooltipModule,
     FlexLayoutModule,
+    MatMenuModule,
   ]
 } )
 export class AppMaterialModule {

src/app/header/header.component.html

@@ -9,16 +9,31 @@
     <div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
 
       <div fxFlex="60px">
-        <button mat-fab class="account-button">
+
+        <button [matMenuTriggerFor]="tripMenu" class="account-button" mat-fab>
           <mat-icon>local_airport</mat-icon>
         </button>
+
+        <mat-menu #tripMenu="matMenu">
+          <button mat-menu-item>My Trips</button>
+          <button mat-menu-item>My Schedule</button>
+        </mat-menu>
+
       </div>
 
       <div fxFlex="60px">
-        <button mat-fab class="account-button">
+
+        <button [matMenuTriggerFor]="profileMenu" class="account-button" mat-fab>
           <mat-icon>person</mat-icon>
         </button>
+
+        <mat-menu #profileMenu="matMenu">
+          <button mat-menu-item>Login</button>
+          <button mat-menu-item>Create Account</button>
+        </mat-menu>
+
       </div>
+
       <div fxFlex="50px">
         <!-- Search input -->
       </div>