From 79223a7561013ae1ad8fd9b3cfda47c4be50b008 Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Mon, 8 Feb 2021 11:26:53 -0500
Subject: [PATCH] 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
---
 material.angular.io/material.angular.io/.nvmrc         |  1 +
 material.angular.io/material.angular.io/LICENSE        |  2 +-
 material.angular.io/material.angular.io/README.md      |  8 ++++++++
 material.angular.io/material.angular.io/angular.json   |  6 ++++++
 .../material.angular.io/src/app/material-docs-app.scss |  5 ++++-
 .../_component-category-list-theme.scss                |  2 ++
 .../component-sidenav/_component-sidenav-theme.scss    |  2 +-
 .../app/pages/component-sidenav/component-sidenav.scss | 10 +---------
 .../app/pages/component-sidenav/component-sidenav.ts   |  2 +-
 .../app/pages/component-viewer/component-viewer.scss   | 10 ++++++++--
 .../src/app/pages/guide-viewer/guide-viewer.scss       |  2 +-
 .../src/app/pages/homepage/_homepage-theme.scss        |  2 ++
 .../material.angular.io/src/styles/_constants.scss     |  5 ++++-
 .../src/styles/custom-themes/deeppurple-amber.scss     |  2 +-
 .../src/styles/custom-themes/indigo-pink.scss          |  2 +-
 .../src/styles/custom-themes/pink-bluegrey.scss        |  2 +-
 .../src/styles/custom-themes/purple-green.scss         |  2 +-
 .../material.angular.io/tools/audit-docs.js            |  2 +-
 .../material.angular.io/tools/lighthouse-audit.js      |  4 +++-
 material.angular.io/material.angular.io/yarn.lock      |  4 ++--
 20 files changed, 50 insertions(+), 25 deletions(-)
 create mode 100644 material.angular.io/material.angular.io/.nvmrc

diff --git a/material.angular.io/material.angular.io/.nvmrc b/material.angular.io/material.angular.io/.nvmrc
new file mode 100644
index 000000000000..48082f72f087
--- /dev/null
+++ b/material.angular.io/material.angular.io/.nvmrc
@@ -0,0 +1 @@
+12
diff --git a/material.angular.io/material.angular.io/LICENSE b/material.angular.io/material.angular.io/LICENSE
index 055a3af98bd8..40cf2459805b 100644
--- a/material.angular.io/material.angular.io/LICENSE
+++ b/material.angular.io/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
diff --git a/material.angular.io/material.angular.io/README.md b/material.angular.io/material.angular.io/README.md
index a38882080ebf..7e609a8e0e5c 100644
--- a/material.angular.io/material.angular.io/README.md
+++ b/material.angular.io/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
diff --git a/material.angular.io/material.angular.io/angular.json b/material.angular.io/material.angular.io/angular.json
index 7634032146dd..10f566657c32 100644
--- a/material.angular.io/material.angular.io/angular.json
+++ b/material.angular.io/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": "**/*",
diff --git a/material.angular.io/material.angular.io/src/app/material-docs-app.scss b/material.angular.io/material.angular.io/src/app/material-docs-app.scss
index 3fa2ad308c4b..1a0b717533eb 100644
--- a/material.angular.io/material.angular.io/src/app/material-docs-app.scss
+++ b/material.angular.io/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;
   }
 }
diff --git a/material.angular.io/material.angular.io/src/app/pages/component-category-list/_component-category-list-theme.scss b/material.angular.io/material.angular.io/src/app/pages/component-category-list/_component-category-list-theme.scss
index 9f1aeeabc413..0487272ba7a9 100644
--- a/material.angular.io/material.angular.io/src/app/pages/component-category-list/_component-category-list-theme.scss
+++ b/material.angular.io/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);
diff --git a/material.angular.io/material.angular.io/src/app/pages/component-sidenav/_component-sidenav-theme.scss b/material.angular.io/material.angular.io/src/app/pages/component-sidenav/_component-sidenav-theme.scss
index 6c2a537ffe91..2de09c761c80 100644
--- a/material.angular.io/material.angular.io/src/app/pages/component-sidenav/_component-sidenav-theme.scss
+++ b/material.angular.io/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);
diff --git a/material.angular.io/material.angular.io/src/app/pages/component-sidenav/component-sidenav.scss b/material.angular.io/material.angular.io/src/app/pages/component-sidenav/component-sidenav.scss
index 1a6610b0ec6c..b67b77994eb0 100644
--- a/material.angular.io/material.angular.io/src/app/pages/component-sidenav/component-sidenav.scss
+++ b/material.angular.io/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 {
diff --git a/material.angular.io/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts b/material.angular.io/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts
index a4edddaa392d..3f8a4c01dd1b 100644
--- a/material.angular.io/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts
+++ b/material.angular.io/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',
diff --git a/material.angular.io/material.angular.io/src/app/pages/component-viewer/component-viewer.scss b/material.angular.io/material.angular.io/src/app/pages/component-viewer/component-viewer.scss
index 17eb75dcff18..bd8f92b829fd 100644
--- a/material.angular.io/material.angular.io/src/app/pages/component-viewer/component-viewer.scss
+++ b/material.angular.io/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;
   }
diff --git a/material.angular.io/material.angular.io/src/app/pages/guide-viewer/guide-viewer.scss b/material.angular.io/material.angular.io/src/app/pages/guide-viewer/guide-viewer.scss
index 2dbf608058de..db87a6efd44b 100644
--- a/material.angular.io/material.angular.io/src/app/pages/guide-viewer/guide-viewer.scss
+++ b/material.angular.io/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;
 
diff --git a/material.angular.io/material.angular.io/src/app/pages/homepage/_homepage-theme.scss b/material.angular.io/material.angular.io/src/app/pages/homepage/_homepage-theme.scss
index 027656e1d9c8..7e4e4b54689a 100644
--- a/material.angular.io/material.angular.io/src/app/pages/homepage/_homepage-theme.scss
+++ b/material.angular.io/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);
diff --git a/material.angular.io/material.angular.io/src/styles/_constants.scss b/material.angular.io/material.angular.io/src/styles/_constants.scss
index 7fd173155d8e..fd46c99a4a7a 100644
--- a/material.angular.io/material.angular.io/src/styles/_constants.scss
+++ b/material.angular.io/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;
diff --git a/material.angular.io/material.angular.io/src/styles/custom-themes/deeppurple-amber.scss b/material.angular.io/material.angular.io/src/styles/custom-themes/deeppurple-amber.scss
index 160f8a9c5498..dd0a3b4f1c8c 100644
--- a/material.angular.io/material.angular.io/src/styles/custom-themes/deeppurple-amber.scss
+++ b/material.angular.io/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);
diff --git a/material.angular.io/material.angular.io/src/styles/custom-themes/indigo-pink.scss b/material.angular.io/material.angular.io/src/styles/custom-themes/indigo-pink.scss
index 53d7c63c52db..315051173663 100644
--- a/material.angular.io/material.angular.io/src/styles/custom-themes/indigo-pink.scss
+++ b/material.angular.io/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);
diff --git a/material.angular.io/material.angular.io/src/styles/custom-themes/pink-bluegrey.scss b/material.angular.io/material.angular.io/src/styles/custom-themes/pink-bluegrey.scss
index 524585f50389..a4e38e95fb31 100644
--- a/material.angular.io/material.angular.io/src/styles/custom-themes/pink-bluegrey.scss
+++ b/material.angular.io/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.
diff --git a/material.angular.io/material.angular.io/src/styles/custom-themes/purple-green.scss b/material.angular.io/material.angular.io/src/styles/custom-themes/purple-green.scss
index b7d7f9a934fc..a0424aa55cd1 100644
--- a/material.angular.io/material.angular.io/src/styles/custom-themes/purple-green.scss
+++ b/material.angular.io/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.
diff --git a/material.angular.io/material.angular.io/tools/audit-docs.js b/material.angular.io/material.angular.io/tools/audit-docs.js
index 82abf7379169..14eac1a505dd 100644
--- a/material.angular.io/material.angular.io/tools/audit-docs.js
+++ b/material.angular.io/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
diff --git a/material.angular.io/material.angular.io/tools/lighthouse-audit.js b/material.angular.io/material.angular.io/tools/lighthouse-audit.js
index 5e481a0091e4..756fbc8798ff 100644
--- a/material.angular.io/material.angular.io/tools/lighthouse-audit.js
+++ b/material.angular.io/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;
 
diff --git a/material.angular.io/material.angular.io/yarn.lock b/material.angular.io/material.angular.io/yarn.lock
index 33e770c85112..15991685e75d 100644
--- a/material.angular.io/material.angular.io/yarn.lock
+++ b/material.angular.io/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"