fix(component-sidenav,component-viewer): fix sticky TOC (#917)

- remove `overflow: hidden` that breaks TOC stickiness
  - made sure to keep the Material Table examples from overflowing afterwards
    via changes to `component-viewer.scss`
- revert change from #784 to make small breakpoint 939 instead of 959 as it
  isn't consistent with our Sass breakpoints or the Material layout spec
- use alternative to `router-outlet + *` styling
- use constants for more media query breakpoints
- add some missing Sass imports
- move $sidenav-width to constants
- update constants to include different horizontal padding for
  guides and sidenav content
- update copyright year
- add stylePreprocessorOptions for shorter Sass imports
- add .nvmrc since Angular projects only support NodeJS 12 atm

Fixes #257

Author: Splaktar

material.angular.io/.nvmrc

@@ -0,0 +1 @@
+12

material.angular.io/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2020 Google LLC.
+Copyright (c) 2021 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

material.angular.io/README.md

@@ -12,6 +12,7 @@ Versions of this site are also available for
 - [v11](https://material.angular.io/)
 
 ## Contributing
+
 Please open bugs against the Angular Material and CDK components, directives, documentation
 contents, API docs, and demos in the
 [Angular Components repo](https://github.com/angular/components/issues).
@@ -22,6 +23,7 @@ navigation not working properly, examples or documentation not being presented i
 issues with rendering or layout of the documentation pages, etc.
 
 ### Where does the content come from?
+
 The guides, examples, and docs content repo
 [angular/material2-docs-content](https://github.com/angular/material2-docs-content) contains the
 documentation content and examples. They are generated from:
@@ -30,6 +32,7 @@ documentation content and examples. They are generated from:
 - [CDK components, services, and directives](https://github.com/angular/components/tree/master/src/cdk)
 
 ## Development Setup
+
 1. Make sure you have [NodeJS LTS](https://nodejs.org) installed
 1. Make sure you have [Yarn](https://yarnpkg.com) installed
 1. Install the project's dependencies
@@ -38,19 +41,24 @@ documentation content and examples. They are generated from:
   - `yarn build:content`
 
 ## Development Server
+
 1. Run `yarn start` for a dev server. Navigate to `http://localhost:4200/`.
 
 ## Build
+
 Run `yarn prod-build` to build the project.
 
 ## Running unit tests
+
 1. Run `yarn test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 ## Running end-to-end tests
+
 Run `yarn e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `yarn start`.
 
 ## Deployment instructions
+
 ```
 > yarn install
 > yarn upgrade @angular/components-examples

material.angular.io/angular.json

@@ -70,6 +70,9 @@
                 "bundleName": "assets/purple-green"
               }
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules", "src", "src/styles"]
+            },
             "scripts": []
           },
           "configurations": {
@@ -151,6 +154,9 @@
                 "bundleName": "assets/purple-green"
               }
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules", "src", "src/styles"]
+            },
             "assets": [
               {
                 "glob": "**/*",

material.angular.io/src/app/material-docs-app.scss

@@ -1,3 +1,5 @@
+@import 'constants';
+
 material-docs-app {
   display: flex;
   flex-direction: column;
@@ -23,9 +25,10 @@ material-docs-app > router-outlet + app-component-sidenav {
   -webkit-overflow-scrolling: touch;
 }
 
-@media (max-width: 720px) {
+@media (max-width: $extra-small-breakpoint-width) {
   material-docs-app > router-outlet + .main-content,
   material-docs-app > router-outlet + app-component-sidenav {
     margin-top: 92px;
+    overflow-y: visible;
   }
 }

material.angular.io/src/app/pages/component-category-list/_component-category-list-theme.scss

@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
 @mixin component-category-list-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);

material.angular.io/src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -1,5 +1,5 @@
 @import '~@angular/material/theming';
-@import '../../../styles/constants';
+@import 'constants';
 
 @mixin component-viewer-sidenav-theme($theme) {
   $primary: map-get($theme, primary);

material.angular.io/src/app/pages/component-sidenav/component-sidenav.scss

@@ -1,6 +1,4 @@
-@import '../../../styles/constants';
-
-$sidenav-width: 240px;
+@import 'constants';
 
 app-component-sidenav {
   display: flex;
@@ -20,12 +18,6 @@ app-component-sidenav {
 .docs-component-sidenav-inner-content {
   display: flex;
   flex-direction: row;
-
-  // The rule will match the element following the router-outlet which will be the routed component.
-  router-outlet + * {
-    flex-grow: 1;
-    overflow: hidden;
-  }
 }
 
 .mat-drawer {

material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts

@@ -49,7 +49,7 @@ import {NavigationFocusService} from '../../shared/navigation-focus/navigation-f
 // These breakpoint values need to stay in sync with the related Sass variables in
 // src/styles/_constants.scss.
 const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
-const SMALL_WIDTH_BREAKPOINT = 939;
+const SMALL_WIDTH_BREAKPOINT = 959;
 
 @Component({
   selector: 'app-component-sidenav',

material.angular.io/src/app/pages/component-viewer/component-viewer.scss

@@ -1,12 +1,18 @@
-@import '../../../styles/constants';
+@import 'constants';
 
 app-component-viewer {
   font-weight: 400;
+  width: calc(100% - #{$sidenav-width + 1} - #{$content-padding-sidenav * 2});
 
   // spacing for the component viewer
-  padding: 20px 50px;
+  padding: 20px $content-padding-sidenav;
 
+  // Sidenav is hidden
+  @media (max-width: $small-breakpoint-width) {
+    width: calc(100% - #{$content-padding-sidenav * 2});
+  }
   @media ($mat-xsmall) {
+    width: calc(100% - #{$content-padding-side-xs * 2});
     padding-left: $content-padding-side-xs;
     padding-right: $content-padding-side-xs;
   }

material.angular.io/src/app/pages/guide-viewer/guide-viewer.scss

@@ -12,7 +12,7 @@ $guide-content-margin-side-xs: 15px;
 }
 
 .docs-guide-wrapper {
-  padding: 20px $content-padding-side 0;
+  padding: 20px $content-padding-guides-side 0;
   display: block;
   text-align: center;
 

material.angular.io/src/app/pages/homepage/_homepage-theme.scss

@@ -1,3 +1,5 @@
+@import '~@angular/material/theming';
+
 @mixin home-page-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);

material.angular.io/src/styles/_constants.scss

@@ -11,5 +11,8 @@ $extra-small-breakpoint-width: 720px;
 $small-breakpoint-width: 959px;
 
 /* For desktop, the content should be aligned with the page title. */
-$content-padding-side: 70px;
+$content-padding-guides-side: 70px;
+$content-padding-sidenav: 50px;
 $content-padding-side-xs: 15px;
+
+$sidenav-width: 240px;

material.angular.io/src/styles/custom-themes/deeppurple-amber.scss

@@ -1,4 +1,4 @@
-@import '../../app-theme';
+@import 'app-theme';
 
 // Define the light theme.
 $primary: mat-palette($mat-deep-purple);

material.angular.io/src/styles/custom-themes/indigo-pink.scss

@@ -1,4 +1,4 @@
-@import '../../app-theme';
+@import 'app-theme';
 
 // Define the light theme.
 $primary: mat-palette($mat-indigo);

material.angular.io/src/styles/custom-themes/pink-bluegrey.scss

@@ -1,4 +1,4 @@
-@import '../../app-theme';
+@import 'app-theme';
 @import '../../highlightjs/material-dark';
 
 // Define the dark theme.

material.angular.io/src/styles/custom-themes/purple-green.scss

@@ -1,4 +1,4 @@
-@import '../../app-theme';
+@import 'app-theme';
 @import '../../highlightjs/material-dark';
 
 // Define the dark theme.

material.angular.io/tools/audit-docs.js

@@ -32,7 +32,7 @@ const MIN_SCORES_PER_PAGE = [
     url: '',
     minScores: {
       'pwa': 70,
-      'performance': 21,
+      'performance': 20,
       'seo': 98,
       'best-practices': 100,
       'accessibility': 100

material.angular.io/tools/lighthouse-audit.js

@@ -16,7 +16,9 @@ const AUDIT_CATEGORIES =
 const LIGHTHOUSE_FLAGS = {
   logLevel : process.env.CI ? 'error' : 'info'
 }; // Be less verbose on CI.
-const SKIPPED_HTTPS_AUDITS = [ 'redirects-http', 'uses-http2', 'uses-long-cache-ttl', 'canonical' ];
+const SKIPPED_HTTPS_AUDITS = [
+  'redirects-http', 'uses-http2', 'uses-long-cache-ttl', 'canonical', 'uses-text-compression'
+];
 const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer';
 const WAIT_FOR_SW_DELAY = 5000;
 

material.angular.io/yarn.lock

@@ -217,8 +217,8 @@
     tslib "^2.0.0"
 
 "@angular/components-examples@angular/material2-docs-content#11.1.x":
-  version "11.1.1-sha-512fadee3"
-  resolved "https://codeload.github.com/angular/material2-docs-content/tar.gz/571f76abef528143be21486398c74215fb3579ad"
+  version "11.1.2-sha-f182db529"
+  resolved "https://codeload.github.com/angular/material2-docs-content/tar.gz/d36453ef80e7066c93f75729a8597f370b5b6a65"
   dependencies:
     tslib "^2.0.0"