From 001ca020bff329c2a40c45cae702796d4fb7edff Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Wed, 28 Jun 2017 14:23:43 +0300
Subject: [PATCH] fix(docs): navigation issues fix, make links work

---
 docs/app/docs/docs.service.ts          |  2 +-
 docs/app/docs/page/page.component.scss |  8 ++++++
 docs/app/docs/page/page.component.ts   | 35 +++++++++++++++++++-------
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/docs/app/docs/docs.service.ts b/docs/app/docs/docs.service.ts
index 84671ad16..5b04572e5 100644
--- a/docs/app/docs/docs.service.ts
+++ b/docs/app/docs/docs.service.ts
@@ -52,7 +52,7 @@ export class DocsService {
 
     let menuItems = structure.map((item: any) => {
       const menuItem: any = {};
-      const itemLink = `${parentLink ? parentLink : ''}/${item.name.replace(/\s/, '-').toLowerCase()}`;
+      const itemLink = `${parentLink ? parentLink : ''}/${item.name.replace(/\s/g, '-').toLowerCase()}`;
       if (item.type !== 'section') {
         menuItem['link'] = itemLink;
       }
diff --git a/docs/app/docs/page/page.component.scss b/docs/app/docs/page/page.component.scss
index 276ca5591..dbe494409 100644
--- a/docs/app/docs/page/page.component.scss
+++ b/docs/app/docs/page/page.component.scss
@@ -8,6 +8,14 @@ $text-color-active: rgba(255, 40, 36, 0.87);
 @include nga-install-component {
   /deep/ nga-card {
 
+    a {
+      color: nga-theme(color-fg-active);
+
+      @include hover-focus-active() {
+        color: nga-theme(color-primary);
+      }
+    }
+
     nga-card-header {
       font-size: nga-theme(font-size-lg);
       font-weight: bold;
diff --git a/docs/app/docs/page/page.component.ts b/docs/app/docs/page/page.component.ts
index ff9309c2b..774a214c0 100644
--- a/docs/app/docs/page/page.component.ts
+++ b/docs/app/docs/page/page.component.ts
@@ -4,9 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnDestroy, Renderer2 } from '@angular/core';
 
 import { NgaMenuService } from '@akveo/nga-theme';
+import { Subscription } from 'rxjs';
+import { NavigationEnd, Router } from '@angular/router';
 
 @Component({
   selector: 'ngd-page',
@@ -32,16 +34,31 @@ import { NgaMenuService } from '@akveo/nga-theme';
      </nga-card>
   `,
 })
-export class NgdPageComponent {
+export class NgdPageComponent implements OnDestroy {
 
   currentItem: any;
+  private routerSubscription: Subscription;
 
-  constructor(private menuService: NgaMenuService) {
-    this.menuService.onItemSelect().subscribe((event: {tag: string, item: any}) => {
-      // TODO: check the tag
-      if (event && event.item && event.item.data) {
-        this.currentItem = event.item.data;
-      }
-    });
+  constructor(private menuService: NgaMenuService,
+              private router: Router,
+              private renderer: Renderer2) {
+
+    this.routerSubscription = this.router.events
+      .filter(event => event instanceof NavigationEnd)
+      .subscribe((event) => {
+
+        this.menuService.getSelectedItem().subscribe((event: {tag: string, item: any}) => {
+          if (event && event.item && event.item.data) {
+            this.currentItem = event.item.data;
+
+            this.renderer.setProperty(document.body, 'scrollTop', 0);
+          }
+        });
+
+      });
+  }
+
+  ngOnDestroy() {
+    this.routerSubscription.unsubscribe();
   }
 }