fix(sidenav): content margins not updated on viewport changes (#14089)

Since the size of the sidenav depends partially on the viewport width, its size can change if the viewport is resized (e.g. the user change their device orientation or they make the window smaller). These changes add some extra logic to update the content margins in such cases.

Author: crisbeto

src/lib/sidenav/drawer.ts

@@ -11,7 +11,7 @@ import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {Platform} from '@angular/cdk/platform';
-import {CdkScrollable, ScrollDispatcher} from '@angular/cdk/scrolling';
+import {CdkScrollable, ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 import {DOCUMENT} from '@angular/common';
 import {
   AfterContentChecked,
@@ -508,7 +508,12 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
               private _ngZone: NgZone,
               private _changeDetectorRef: ChangeDetectorRef,
               @Inject(MAT_DRAWER_DEFAULT_AUTOSIZE) defaultAutosize = false,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
+              /**
+               * @deprecated viewportRuler to become a required parameter.
+               * @breaking-change 8.0.0
+               */
+              @Optional() viewportRuler?: ViewportRuler) {
 
     // If a `Dir` directive exists up the tree, listen direction changes
     // and update the left/right properties to point to the proper start/end.
@@ -519,6 +524,14 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
       });
     }
 
+    // Since the minimum width of the sidenav depends on the viewport width,
+    // we need to recompute the margins if the viewport changes.
+    if (viewportRuler) {
+      viewportRuler.change()
+        .pipe(takeUntil(this._destroyed))
+        .subscribe(() => this._updateContentMargins());
+    }
+
     this._autosize = defaultAutosize;
   }