feat: RTL support (#1634)

package.json

@@ -40,9 +40,9 @@
     "@angular/platform-browser-dynamic": "6.0.0",
     "@angular/router": "6.0.0",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "^2.0.0-rc.7",
-    "@nebular/security": "^2.0.0-rc.7",
-    "@nebular/theme": "^2.0.0-rc.7",
+    "@nebular/auth": "^2.0.0-rc.8",
+    "@nebular/security": "^2.0.0-rc.8",
+    "@nebular/theme": "^2.0.0-rc.8",
     "@ng-bootstrap/ng-bootstrap": "1.0.0",
     "@swimlane/ngx-charts": "7.0.1",
     "angular2-chartjs": "0.4.1",

src/app/@core/data/state.service.ts

@@ -1,10 +1,11 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { of as observableOf,  Observable,  BehaviorSubject } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
 
-import { of as observableOf,  Observable ,  BehaviorSubject } from 'rxjs';
-import { Injectable } from '@angular/core';
-
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
 
 @Injectable()
-export class StateService {
+export class StateService implements OnDestroy {
 
   protected layouts: any = [
     {
@@ -27,21 +28,44 @@ export class StateService {
 
   protected sidebars: any = [
     {
-      name: 'Left Sidebar',
+      name: 'Sidebar at layout start',
       icon: 'nb-layout-sidebar-left',
-      id: 'left',
+      id: 'start',
       selected: true,
     },
     {
-      name: 'Right Sidebar',
+      name: 'Sidebar at layout end',
       icon: 'nb-layout-sidebar-right',
-      id: 'right',
+      id: 'end',
     },
   ];
 
   protected layoutState$ = new BehaviorSubject(this.layouts[0]);
   protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
 
+  alive = true;
+
+  constructor(directionService: NbLayoutDirectionService) {
+    directionService.onDirectionChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(direction => this.updateSidebarIcons(direction));
+
+    this.updateSidebarIcons(directionService.getDirection());
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+
+  private updateSidebarIcons(direction: NbLayoutDirection) {
+    const [ startSidebar, endSidebar ] = this.sidebars;
+    const isLtr = direction === NbLayoutDirection.LTR;
+    const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
+    const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
+    startSidebar.icon = startIconClass;
+    endSidebar.icon = endIconClass;
+  }
+
   setLayoutState(state: any): any {
     this.layoutState$.next(state);
   }

src/app/@theme/components/header/header.component.html

@@ -6,14 +6,15 @@
     <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
   </div>
   <ngx-theme-switcher></ngx-theme-switcher>
+  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
 </div>
 
 <nb-actions
   size="medium"
   class="header-container"
   [class.right]="position === 'normal'"
   [class.left]="position === 'inverse'">
-  <nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action>
+  <nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
   <nb-action *nbIsGranted="['view', 'user']" >
     <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
   </nb-action>