feat: change navbar, toolbar and landing page coloring to denote when looking at docs on next (#540)

Author: josephperrott

material.angular.io/package-lock.json

@@ -23,6 +23,7 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $next-theme: mat-palette($mat-red);
 
   .docs-app-background {
     background: mat-color($background, background);
@@ -41,6 +42,10 @@
     color: mat-color($primary, default-contrast);
   }
 
+  .is-next-version {
+    background: mat-color($next-theme, 900) !important;
+  }
+
   @include component-category-list-theme($theme);
   @include component-list-theme($theme);
   @include component-viewer-sidenav-theme($theme);

material.angular.io/src/_app-theme.scss

@@ -1,4 +1,5 @@
-<header class="docs-header-background">
+<header class="docs-header-background"
+        [class.is-next-version]="isNextVersion">
   <div class="docs-header-section">
     <div class="docs-header-headline">
       <h1 class="mat-h1">Angular Material</h1>

material.angular.io/src/app/pages/homepage/homepage.html

@@ -11,6 +11,8 @@ import {ComponentPageTitle} from '../page-title/page-title';
   styleUrls: ['./homepage.scss']
 })
 export class Homepage implements OnInit {
+  isNextVersion = location.hostname.startsWith('next.material.angular.io');
+
   constructor(public _componentPageTitle: ComponentPageTitle) {}
 
   ngOnInit(): void {

material.angular.io/src/app/pages/homepage/homepage.ts

@@ -1,4 +1,5 @@
-<footer class="docs-footer">
+<footer class="docs-footer"
+        [class.is-next-version]="isNextVersion">
   <div class="docs-footer-list">
     <div class="docs-footer-logo">
       <div class="footer-logo">

material.angular.io/src/app/shared/footer/footer.html

@@ -7,6 +7,8 @@ import {materialVersion} from '../version/version';
   styleUrls: ['./footer.scss']
 })
 export class Footer {
+  isNextVersion = location.hostname.startsWith('next.material.angular.io');
+
   version = materialVersion;
 }
 

material.angular.io/src/app/shared/footer/footer.ts

@@ -1,5 +1,6 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
-<nav class="docs-navbar-header">
+<nav class="docs-navbar-header"
+     [class.is-next-version]="isNextVersion">
   <a mat-button class="docs-button" routerLink="/" aria-label="Angular Material">
     <img class="docs-angular-logo"
          src="../../../assets/img/homepage/angular-white-transparent.svg"

material.angular.io/src/app/shared/navbar/navbar.html

@@ -14,6 +14,8 @@ const SECTIONS_KEYS = Object.keys(SECTIONS);
   styleUrls: ['./navbar.scss']
 })
 export class NavBar {
+  isNextVersion = location.hostname.startsWith('next.material.angular.io');
+
   get sections() {
     return SECTIONS;
   }