fix(sidenav): not positioning correctly in rtl (#12741)

Adds a workaround for a Chrome issue where the sidenav content is partially cut off when `dir='rtl'` is set on the `body` or `html` nodes.

Author: crisbeto

src/lib/sidenav/drawer.html

@@ -0,0 +1,3 @@
+<div class="mat-drawer-inner-container">
+  <ng-content></ng-content>
+</div>

src/lib/sidenav/drawer.scss

@@ -162,6 +162,17 @@ $mat-drawer-over-drawer-z-index: 4;
   }
 }
 
+// Note that this div isn't strictly necessary on all browsers, however we need it in
+// order to avoid a layout issue in Chrome. The issue is that in RTL mode the browser doesn't
+// account for the sidenav's scrollbar while positioning, which ends up pushing it partially
+// out of the screen. We work around the issue by having the scrollbar be on this inner container.
+.mat-drawer-inner-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .mat-sidenav-fixed {
   position: fixed;
 }

src/lib/sidenav/drawer.ts

@@ -103,7 +103,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
   moduleId: module.id,
   selector: 'mat-drawer',
   exportAs: 'matDrawer',
-  template: '<ng-content></ng-content>',
+  templateUrl: 'drawer.html',
   animations: [matDrawerAnimations.transformDrawer],
   host: {
     'class': 'mat-drawer',

src/lib/sidenav/sidenav.ts

@@ -54,7 +54,7 @@ export class MatSidenavContent extends MatDrawerContent {
   moduleId: module.id,
   selector: 'mat-sidenav',
   exportAs: 'matSidenav',
-  template: '<ng-content></ng-content>',
+  templateUrl: 'drawer.html',
   animations: [matDrawerAnimations.transformDrawer],
   host: {
     'class': 'mat-drawer mat-sidenav',