Navigation and footer finished

src/app/app.module.ts

@@ -4,17 +4,12 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule
-  ],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, HttpClientModule],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/modules/gaming/components/game-list/game-list.component.html

@@ -0,0 +1 @@
+<p>game-list works!</p>

src/app/modules/gaming/components/game-list/game-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameListComponent } from './game-list.component';
+
+describe('GameListComponent', () => {
+  let component: GameListComponent;
+  let fixture: ComponentFixture<GameListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GameListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GameListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/gaming/components/game-list/game-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game-list',
+  templateUrl: './game-list.component.html',
+  styleUrls: ['./game-list.component.css']
+})
+export class GameListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/gaming/components/game/game.component.html

@@ -0,0 +1 @@
+<p>game works!</p>

src/app/modules/gaming/components/game/game.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameComponent } from './game.component';
+
+describe('GameComponent', () => {
+  let component: GameComponent;
+  let fixture: ComponentFixture<GameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/gaming/components/game/game.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game',
+  templateUrl: './game.component.html',
+  styleUrls: ['./game.component.css']
+})
+export class GameComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/gaming/gaming.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { GameComponent } from './components/game/game.component';
+import { GameListComponent } from './components/game-list/game-list.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: GameListComponent
+  }
+];
+
+@NgModule({
+  declarations: [GameComponent, GameListComponent],
+  imports: [CommonModule, RouterModule.forChild(routes)]
+})
+export class GamingModule {}

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

@@ -10,9 +10,6 @@ <h5>Discover your new favorite game.</h5>
       <mat-label>Cars</mat-label>
       <select matNativeControl required>
         <option value="volvo">Volvo</option>
-        <option value="saab">Saab</option>
-        <option value="mercedes">Mercedes</option>
-        <option value="audi">Audi</option>
       </select>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="onClick();">Explore</button>

src/app/modules/home/home.module.ts

@@ -9,6 +9,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { NotificationComponent } from '../shared-components/components/notification/notification.component';
 import { SharedModule } from '../shared/shared.module';
 import { GamesService } from '@service/games/games.service';
+import { CustomIconService } from '@serviceicons/custom-icons.service';
 
 const routes: Routes = [
   {
@@ -39,6 +40,6 @@ const routes: Routes = [
     SharedModule
   ],
   entryComponents: [NotificationComponent],
-  providers: [GamesService]
+  providers: [GamesService, CustomIconService]
 })
 export class HomeModule {}

src/app/modules/index.ts

@@ -4,5 +4,14 @@ import { ContactModule } from './contact/contact.module';
 import { SharedModule } from './shared/shared.module';
 import { SharedComponentsModule } from './shared-components/shared-components.module';
 import { MaterialModule } from './shared-components/material/material.module';
+import { GamingModule } from './gaming/gaming.module';
 
-export { VideoGamerLayoutModule, HomeModule, ContactModule, SharedModule, SharedComponentsModule, MaterialModule };
+export {
+  VideoGamerLayoutModule,
+  HomeModule,
+  ContactModule,
+  SharedModule,
+  SharedComponentsModule,
+  MaterialModule,
+  GamingModule
+};

src/app/modules/layouts/video-gamer-layout/video-gamer-layout.module.ts

@@ -10,6 +10,11 @@ const routes: Routes = [
     component: DefaultComponent,
     loadChildren: () => import('../../home/home.module').then(mod => mod.HomeModule)
   },
+  {
+    path: 'gaming',
+    component: DefaultComponent,
+    loadChildren: () => import('../../gaming/gaming.module').then(mod => mod.GamingModule)
+  },
   {
     path: 'contact',
     component: DefaultComponent,

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

@@ -7,23 +7,69 @@
 
   <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">
-        <mat-icon>{{ link.icon }}</mat-icon>
-        <span class="spacy">{{ link.name }}</span>
-      </button>
+      <ng-container *ngFor="let link of links">
+        <button mat-button [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" class="nav-link
+          light-text" *ngIf="link.name != 'Gaming'; else gamingMenu">
+          <mat-icon>{{ link.icon }}</mat-icon>
+          <span class="spacy">{{ link.name }}</span>
+        </button>
+
+        <ng-template #gamingMenu>
+          <button mat-button [matMenuTriggerFor]="gaming">
+            <mat-icon>games</mat-icon>
+            <span class="spacy">Gaming</span>
+          </button>
+
+          <mat-menu #gaming="matMenu">
+            <button mat-menu-item [matMenuTriggerFor]="platformsmenu">Platforms</button>
+            <button mat-menu-item [matMenuTriggerFor]="genresmenu">Genres</button>
+          </mat-menu>
+
+          <mat-menu #platformsmenu="matMenu">
+            <button mat-menu-item *ngFor="let platform of platforms" [routerLink]="['/gaming/platform', platform.slug]">
+              <mat-icon [svgIcon]="platform.icon"></mat-icon>
+              {{ platform.name }}
+            </button>
+          </mat-menu>
+
+          <mat-menu #genresmenu="matMenu">
+            <button mat-menu-item *ngFor="let genre of genres" [routerLink]="['/gaming/genres', genre.slug]"
+              routerLinkActive>
+              {{ genre.name }}
+            </button>
+          </mat-menu>
+        </ng-template>
+
+        <!-- <ng-template #standard>
+          <button mat-button [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" class="nav-link
+            light-text">
+            <mat-icon>{{ link.icon }}</mat-icon>
+            <span class="spacy">{{ link.name }}</span>
+        </ng-template> -->
+      </ng-container>
 
       <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>
+        <a mat-menu-item href="https://github.com/CerealKiller97" target="_blank">
+          <mat-icon>thumb_up</mat-icon>
+          Follow me on Github
+        </a>
+        <a mat-menu-item href="https://github.com/CerealKiller97/NG-VideoGamer" target="_blank">
           <mat-icon>star</mat-icon>
           <span>Star it on Github</span>
-        </button>
+        </a>
       </mat-menu>
+
+      <!-- TODO: Toggle dark mode -->
+      <!-- <div>
+        <mat-slide-toggle color="warn"></mat-slide-toggle>
+      </div>
+
+      <small class="light-text spacy">Dark Theme</small> -->
+
     </nav>
   </span>
 </mat-toolbar>

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

@@ -1,11 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-
+import { CustomIconService } from '@service/icons/custom-icons.service';
 export interface Link {
   name: string;
   path: string;
   icon: string;
 }
 
+export interface Genre {
+  name: string;
+  icon: string;
+  slug: string;
+}
+
+export interface Platform {
+  name: string;
+  icon: string;
+  slug: string;
+}
+
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
@@ -17,9 +29,32 @@ export class HeaderComponent implements OnInit {
     { name: 'Gaming', path: 'gaming', icon: 'games' },
     { name: 'Contact', path: 'contact', icon: 'mail' }
   ];
-  constructor() {}
 
-  ngOnInit() {}
+  public readonly genres: Genre[] = [
+    { name: 'Action', icon: '../../../../../assets/images/genres/action.png', slug: 'action' },
+    { name: 'Strategy', icon: '', slug: 'strategy' },
+    { name: 'RPG', icon: '', slug: 'role-playing-games-rpg' },
+    { name: 'Shooter', icon: '', slug: 'shooter' },
+    { name: 'Adventure', icon: '', slug: 'adventure' },
+    { name: 'Puzzle', icon: '', slug: 'puzzle' },
+    { name: 'Racing', icon: '', slug: 'racing' },
+    { name: 'Sports', icon: '', slug: 'sports' }
+  ];
+
+  public readonly platforms: Platform[] = [
+    { name: 'PC', icon: 'windows', slug: 'pc' },
+    { name: 'PlayStation 4', icon: 'ps4', slug: 'playstation4' },
+    { name: 'Xbox One', icon: 'xbox', slug: 'xbox-one' },
+    { name: 'Nintendo Switch', icon: 'nintendo', slug: 'nintendo-switch' },
+    { name: 'iOS', icon: 'ios', slug: 'ios' },
+    { name: 'Android', icon: 'android', slug: 'android' }
+  ];
+
+  constructor(private readonly customIconsService: CustomIconService) {}
+
+  ngOnInit(): void {
+    this.customIconsService.registerPlatformIcons();
+  }
 
   trackByFunc(index: number, item: Link): string {
     return item.path;

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

@@ -0,0 +1 @@
+<p>hero works!</p>

src/app/modules/shared-components/components/hero/hero.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroComponent } from './hero.component';
+
+describe('HeroComponent', () => {
+  let component: HeroComponent;
+  let fixture: ComponentFixture<HeroComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  templateUrl: './hero.component.html',
+  styleUrls: ['./hero.component.css']
+})
+export class HeroComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -7,10 +7,12 @@ import { FingerprintSpinnerModule } from 'angular-epic-spinners';
 import { RouterModule } from '@angular/router';
 import { MaterialModule } from './material/material.module';
 import { NotificationComponent } from './components/notification/notification.component';
-
+import { CustomIconService } from '@serviceicons/custom-icons.service';
+import { HeroComponent } from './components/hero/hero.component';
 @NgModule({
-  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, NotificationComponent],
+  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, NotificationComponent, HeroComponent],
   imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule],
-  exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent]
+  exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent],
+  providers: [CustomIconService]
 })
 export class SharedComponentsModule {}