Fixing footer & header

src/app/modules/home/components/home/home.component.html

@@ -1,6 +1,7 @@
 <mat-grid-list cols="1" rowHeight="2:1">
   <mat-grid-tile>
     <h1 class="light-text">Welcome to VideoGamer</h1>
+    <br />
     <h5>Discover your new favorite game.</h5>
     <mat-form-field>
       <input matInput placeholder="label" value="value">

src/app/modules/shared-components/components/footer/footer.component.css

@@ -5,3 +5,13 @@
 .light-text {
   font-weight: 100 !important;
 }
+
+.example-fill-remaining-space {
+  /* This fills the remaining space, by using flexbox.
+     Every toolbar row uses a flexbox row layout. */
+  flex: 1 1 auto;
+}
+
+.padding-left {
+  padding-left: 5px !important;
+}

src/app/modules/shared-components/components/footer/footer.component.html

@@ -1,3 +1,9 @@
 <mat-toolbar color="primary">
-  <small class="text-center light-text">Copyright 2019 &copy; Stefan Bogdanovic</small>
+  <small class="text-center light-text">&copy; 2019 Stefan Bogdanović</small>
+  <span class="example-fill-remaining-space"></span>
+
+  <span>
+    <small class="light-text">Made with </small>
+  </span>
+  <mat-icon color="warn" class="padding-left">favorite</mat-icon>
 </mat-toolbar>

src/app/modules/shared-components/components/header/header.component.css

@@ -11,3 +11,7 @@
 .light-text {
   font-weight: 100 !important;
 }
+
+.spacy {
+  margin-left: 10px !important;
+}

src/app/modules/shared-components/components/header/header.component.html

@@ -1,14 +1,29 @@
 <mat-toolbar color="primary">
-  <span class="light-text">VideoGamer</span>
+  <button mat-button [routerLink]="''">
+    <span class="light-text">VideoGamer</span>
+  </button>
 
   <span class="example-fill-remaining-space"></span>
 
   <span>
     <nav mat-tab-nav-bar>
       <button mat-button *ngFor="let link of links" [routerLink]="link.path" routerLinkActive #rla="routerLinkActive"
         class="nav-link light-text">
-        {{ link.name }}
+        <mat-icon>{{ link.icon }}</mat-icon>
+        <span class="spacy">{{ link.name }}</span>
       </button>
+
+      <button class="light-text" mat-button [matMenuTriggerFor]="menu">
+        <mat-icon>apps</mat-icon>
+        <span class="spacy">About project</span>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>Follow me on Github</button>
+        <button mat-icon-button>
+          <mat-icon>star</mat-icon>
+          <span>Star it on Github</span>
+        </button>
+      </mat-menu>
     </nav>
   </span>
 </mat-toolbar>

src/app/modules/shared-components/components/header/header.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 export interface Link {
   name: string;
   path: string;
+  icon: string;
 }
 
 @Component({
@@ -12,9 +13,9 @@ export interface Link {
 })
 export class HeaderComponent implements OnInit {
   public readonly links: Link[] = [
-    { name: 'Home', path: '' },
-    { name: 'Gaming', path: 'gaming' },
-    { name: 'Contact', path: 'contact' }
+    { name: 'Home', path: '', icon: 'home' },
+    { name: 'Gaming', path: 'gaming', icon: 'games' },
+    { name: 'Contact', path: 'contact', icon: 'mail' }
   ];
   constructor() {}
 

src/app/modules/shared-components/material/material.module.ts

@@ -5,10 +5,20 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatTabsModule, MatGridListModule],
-  exports: [MatToolbarModule, MatButtonModule, MatTabsModule, MatGridListModule]
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatTabsModule,
+    MatGridListModule,
+    MatIconModule,
+    MatMenuModule
+  ],
+  exports: [MatToolbarModule, MatButtonModule, MatTabsModule, MatGridListModule, MatIconModule, MatMenuModule]
 })
 export class MaterialModule {}

src/custom-theme.scss

@@ -1,4 +1,3 @@
-
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import '~@angular/material/theming';
@@ -25,4 +24,3 @@ $video-gamer-theme: mat-light-theme($video-gamer-primary, $video-gamer-accent, $
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($video-gamer-theme);
-