Adding header and GH icon

src/app/1. features/game/game.component.html

@@ -1,5 +1,32 @@
-<header class="flex-center">
-  <h1 class="w-100">Palabritas</h1>
+<header>
+  <mat-toolbar>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      class="example-icon"
+      aria-label="Example icon-button with menu icon"
+    >
+      <mat-icon>menu</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="clickNewGame()">New Game</button>
+    </mat-menu>
+
+    <!-- <span>Palabritas</span> -->
+    <span class="flex-grow-1 text-align-center">Palabritas</span>
+
+    <a
+      class="github-logo d-flex align-items-center"
+      target="_blank"
+      href="https://github.com/tarrball/palabritas"
+    >
+      <img
+        src="../../../assets/github-mark-white.png"
+        alt="GitHub logo"
+        aria-label="View on GitHub"
+      />
+    </a>
+  </mat-toolbar>
 </header>
 
 <main class="flex-grow-1">
@@ -40,15 +67,7 @@ <h1 class="w-100">Palabritas</h1>
     </button>
   </div>
 
-  <div class="flex-center-between">
-    <button mat-raised-button (click)="clickNewGame()">New Game</button>
+  <div class="flex-center-end">
     <button mat-raised-button (click)="clickEnter()">Enter</button>
   </div>
 </main>
-
-<footer class="flex-center-between">
-  <span>andrew@tarrball.com</span>
-  <a href="https://github.com/tarrball/palabritas" target="_blank"
-    >View on GitHub</a
-  >
-</footer>

src/app/1. features/game/game.component.sass

@@ -1,25 +1,18 @@
 :host
-  display: flex
-  flex-direction: column
   font-variant: small-caps
-  max-width: 496px
 
-header
-  h1
-    flex-grow: 1
-    text-align: center
+.github-logo
+  cursor: pointer
+  padding: 12px
+
+  img
+    height: 24px
 
 main
   .letter-buttons
     button
       margin: 0 4px
 
-footer
-  margin-top: 64px
-
-  span
-    text-transform: uppercase
-
 .answers-container
   height: 160px
 

src/app/app.module.ts

@@ -11,6 +11,9 @@ import { EffectsModule } from '@ngrx/effects';
 import { GameEffects } from './2. store/game/game.effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @NgModule({
   declarations: [AppComponent, GameComponent],
@@ -19,6 +22,9 @@ import { MatButtonModule } from '@angular/material/button';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
     StoreModule.forRoot(reducers, {
       metaReducers,
       runtimeChecks: {

src/styles.sass

@@ -15,6 +15,9 @@
 .justify-content-between
   justify-content: space-between !important
 
+.justify-content-end
+  justify-content: flex-end !important
+
 .h-100
   height: 100% !important
 
@@ -33,9 +36,19 @@
   @extend .flex-center
   @extend .justify-content-between
 
+.flex-center-end
+  @extend .flex-center
+  @extend .justify-content-end
+
 .hori-scroll
   overflow-x: auto
 
+.spacer
+  flex: 1 1 auto
+
+.text-align-center
+  text-align: center
+
 /* Material Overrides */
 
 app-game