[ACA-2374] Sidenav - RTL support (#1098)

* add rtl HostBinding

* sidenav direction input

* remove unused style

* rtl style changes

* test

src/app/components/layout/app-layout/app-layout.component.html

@@ -23,6 +23,7 @@
     <adf-sidenav-layout-navigation>
       <ng-template let-isMenuMinimized="isMenuMinimized">
         <app-sidenav
+          [direction]="direction"
           [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
           [attr.data-automation-id]="
             isMenuMinimized() ? 'collapsed' : 'expanded'

src/app/components/sidenav/sidenav.component.scss

@@ -102,3 +102,13 @@
     align-items: center;
   }
 }
+
+.app-sidenav-rtl {
+  .action-button .action-button__label {
+    margin-right: 8px !important;
+  }
+
+  .mat-expansion-panel-header {
+    padding: 0 0 0 8px !important;
+  }
+}

src/app/components/sidenav/sidenav.component.spec.ts

@@ -74,4 +74,22 @@ describe('SidenavComponent', () => {
       }
     ]);
   }));
+
+  it('should add RTL class when direction is set to `rtl`', () => {
+    component.direction = 'rtl';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.nativeElement.classList.contains('app-sidenav-rtl')
+    ).toBe(true);
+  });
+
+  it('should not add RTL class when direction is set to `ltr`', () => {
+    component.direction = 'ltr';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.nativeElement.classList.contains('app-sidenav-rtl')
+    ).toBe(false);
+  });
 });

src/app/components/sidenav/sidenav.component.theme.scss

@@ -45,10 +45,6 @@
       font-size: 14px !important;
     }
 
-    .mat-expansion-panel-header-title > span {
-      margin-left: 0 !important;
-    }
-
     .action-button--active {
       color: mat-color($accent) !important;
     }

src/app/components/sidenav/sidenav.component.ts

@@ -30,7 +30,8 @@ import {
   TemplateRef,
   OnInit,
   ViewEncapsulation,
-  OnDestroy
+  OnDestroy,
+  HostBinding
 } from '@angular/core';
 import { CollapsedTemplateDirective } from './directives/collapsed-template.directive';
 import { ExpandedTemplateDirective } from './directives/expanded-template.directive';
@@ -50,6 +51,7 @@ import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 })
 export class SidenavComponent implements OnInit, OnDestroy {
   @Input() mode: 'collapsed' | 'expanded' = 'expanded';
+  @Input() direction: 'ltr' | 'rtl' = 'ltr';
 
   @ContentChild(ExpandedTemplateDirective, { read: TemplateRef })
   expandedTemplate;
@@ -60,6 +62,10 @@ export class SidenavComponent implements OnInit, OnDestroy {
   groups: Array<NavBarGroupRef> = [];
   private onDestroy$: Subject<boolean> = new Subject<boolean>();
 
+  @HostBinding('class.app-sidenav-rtl') get isRtlDirection(): boolean {
+    return this.direction === 'rtl';
+  }
+
   constructor(
     private store: Store<AppStore>,
     private extensions: AppExtensionService