How to swap layout column order when switching to RTL?

[daveboulden]

I have added i18n support to my app using ngx-translate (http://www.ngx-translate.com/). I now have my text running RTL when I choose an RTL based language. That works fine.

How do I swap the positions of the menu and content columns so that the menu swaps to the right-hand side?

I have defined the languages like this:

export const langs = [
    { code: 'en', title: 'English', rtl: false },
    { code: 'fr', title: 'Français', rtl: false },
    { code: 'de', title: 'Deutsche', rtl: false },
    { code: 'es', title: 'Español', rtl: false },
    { code: 'it', title: 'Italiano', rtl: false },
    { code: 'ja', title: '日本人', rtl: false },
    { code: 'he', title: 'עברית', rtl: true },
];

The theme's header component contains a language switching drop-down marked up as:

<nb-select (selectedChange)="changeLanguage($event)" status="primary">
    <nb-option *ngFor="let lang of langs" [value]="lang.code">{{ lang.title }}</nb-option>
</nb-select> 

and the event handling code is:

changeLanguage(lang: string) {
    this.translate.use(lang);    // call ngx-translate service to set language

    var thisLang = this.getLangByCode(lang);

    if (thisLang.rtl) {
        this.dirService.setDirection(NbLayoutDirection.RTL)
    } else {
        this.dirService.setDirection(NbLayoutDirection.LTR)
    }
}

getLangByCode(code){
    return this.langs.find(x => x.code === code);
}

What service should I import and what code do I need to add to my changeLanguage() function to move the menu to the right hand side when an RTL language is chosen?

[daveboulden]

I have managed to solve this one myself, though you should update your source accordingly.

The problem was that the one-column layout did not have the logical "start" value applied to the <nb-sidebar> that contains the menu.

I updated /src/app/@theme/layouts/one-column/one-column-layout.ts to be (added the start attribute to <nb-sidebar>):

/*
 * Copyright (c) Akveo 2019. All Rights Reserved.
 * Licensed under the Single Application / Multi Application License.
 * See LICENSE_SINGLE_APP / LICENSE_MULTI_APP in the 'docs' folder for license information on type of purchased license.
 */

import { Component } from '@angular/core';

@Component({
  selector: 'ngx-one-column-layout',
  styleUrls: ['./one-column.layout.scss'],
  template: `
    <nb-layout windowMode>
      <nb-layout-header fixed>
        <ngx-header></ngx-header>
      </nb-layout-header>

      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>

      <nb-layout-column>
        <ng-content select="router-outlet"></ng-content>
      </nb-layout-column>

      <nb-layout-footer fixed>
        <ngx-footer></ngx-footer>
      </nb-layout-footer>
    </nb-layout>
  `,
})
export class OneColumnLayoutComponent {}

[valentinkononov]

Hi Dave! thanks a lot for mentioning this, in fact, it's working in ngx-admin demo, but we missed that 'start' feature when doing updates to the latest nebular and some refactoring. thanks, I will include this fix to the bundle!