Fix navbar shadow not showing on all routes (#225)

Author: willshowell

src/app/app-module.ts

@@ -48,7 +48,6 @@ import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
     DocViewerModule,
     FooterModule,
     GuideListModule,
-    GuideListModule,
     GuideViewerModule,
     HomepageModule,
     NavBarModule,

src/app/material-docs-app.ts

@@ -1,5 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {Router, NavigationStart} from '@angular/router';
+import {Router, NavigationEnd} from '@angular/router';
+import 'rxjs/add/operator/filter';
 
 
 @Component({
@@ -12,19 +13,24 @@ export class MaterialDocsApp {
   showShadow = false;
 
   constructor(router: Router) {
+    const routesWithNavbarShadow = ['/categories', '/components'];
+
     let previousRoute = router.routerState.snapshot.url;
 
-    router.events.subscribe((data: NavigationStart) => {
-      this.showShadow = data.url.startsWith('/components');
+    router.events
+      .filter(event => event instanceof NavigationEnd )
+      .subscribe((data: NavigationEnd) => {
+        this.showShadow = !!routesWithNavbarShadow
+            .find(route => data.urlAfterRedirects.startsWith(route));
 
-      // We want to reset the scroll position on navigation except when navigating within
-      // the documentation for a single component.
-      if (!isNavigationWithinComponentView(previousRoute, data.url)) {
-        resetScrollPosition();
-      }
+        // We want to reset the scroll position on navigation except when navigating within
+        // the documentation for a single component.
+        if (!isNavigationWithinComponentView(previousRoute, data.urlAfterRedirects)) {
+          resetScrollPosition();
+        }
 
-      previousRoute = data.url;
-    });
+        previousRoute = data.urlAfterRedirects;
+      });
   }
 }
 

src/app/pages/homepage/homepage.html

@@ -5,7 +5,7 @@ <h1 class="mat-h1">Angular Material</h1>
       <h2> Material Design components for Angular</h2>
     </div>
     <div class="docs-header-start">
-     <a md-raised-button class="docs-button" routerLink="guide/getting-started">Get started</a>
+     <a md-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
     </div>
   </div>
 </header>
@@ -59,7 +59,7 @@ <h2>Optimized for Angular</h2>
     </div>
   </div>
   <div class="docs-homepage-bottom-start">
-    <a md-raised-button class="docs-button" routerLink="guide/getting-started">Get started</a>
+    <a md-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
   </div>
 </div>