feat(menu): fixed menu position

Author: Ismaestro

src/app/core/material.module.ts

@@ -1,15 +1,18 @@
 import {
   MdAutocompleteModule,
   MdButtonModule,
-  MdCardModule, MdDialogModule,
+  MdCardModule,
+  MdDialogModule,
   MdGridListModule,
   MdIconModule,
-  MdInputModule, MdListModule,
+  MdInputModule,
+  MdListModule,
   MdMenuModule,
   MdProgressBarModule,
   MdProgressSpinnerModule,
   MdSliderModule,
-  MdSnackBarModule, MdTooltipModule
+  MdSnackBarModule,
+  MdTooltipModule
 } from '@angular/material';
 import {NgModule} from '@angular/core';
 

src/app/core/nav/nav.component.scss

@@ -1,21 +1,33 @@
-nav {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 8px 16px;
-  color: white;
-  height: 3em;
-  background: #3f51b5;
+:host(toh-nav) {
+  padding-top: 5em;
+  display: grid;
 
-  .mat-raised-button {
-    color: #3f51b5;
-    margin-right: 1em;
-  }
+  header {
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+
+    nav {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: 8px 16px;
+      color: white;
+      height: 3em;
+      background: #3f51b5;
 
-  .progress-bar {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    height: 5px;
+      .mat-raised-button {
+        color: #3f51b5;
+        margin-right: 1em;
+      }
+
+      .progress-bar {
+        display: flex;
+        align-content: center;
+        align-items: center;
+        height: 5px;
+      }
+    }
   }
 }
+

src/app/heroes/hero-top/hero-top.component.html

@@ -17,7 +17,8 @@ <h1 class="section-title">{{'topHeroes' | translate}}</h1>
                     {{hero.likes}}
                     <md-icon mdTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
                              [mdTooltipPosition]="'above'"
-                             class="like-icon" (click)="like(hero)">favorite</md-icon>
+                             class="like-icon" (click)="like(hero)">favorite
+                    </md-icon>
                 </div>
             </md-card-header>
             <img md-card-image src="assets/images/heroes/{{hero.id}}.jpg">

src/polyfills.ts

@@ -29,4 +29,4 @@ import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/startWith';
 
-import 'hammerjs';
+import 'hammerjs';