fix(docs): navigation issues fix, make links work

akveo · Jun 28, 2017 · 001ca02 · 001ca02
1 parent 2e079ad
commit 001ca02
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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();
   }
 }