2

I have to set ngx-admin to RTL style. I must set sidebar in Right. after some research not founded any solution in this Github project. anybody can help me with this problem.

user3111321
  • 55
  • 1
  • 2
  • 9

4 Answers4

5

You should do two things:

1- in theme.module.ts:

    export class ThemeModule {
  static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: "default",
          },
          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
          DEFAULT_MEDIA_BREAKPOINTS,

          NbLayoutDirection.RTL
        ).providers,
      ],
    };
  }
}

we add:

   DEFAULT_MEDIA_BREAKPOINTS,
   NbLayoutDirection.RTL

2- and for sidebar add "start" to:

  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
    <ng-content select="nb-menu"></ng-content>
  </nb-sidebar>
Khaled Rostampour
  • 115
  • 1
  • 15
1

Change file one-column.layout.scss to this

@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  .menu-sidebar ::ng-deep .scrollable {
    padding-top: nb-theme(layout-padding-top);




  }

  .menu-sidebar-rtl{
    order: 0 !important;
  }

  .menu-sidebar{
    order: 2 !important;
  }

}

and change file one-column.layout.ts to this

import {Component, OnInit} from '@angular/core';
import {NbLayoutDirection, NbLayoutDirectionService} from "@nebular/theme";

@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 [ngClass]="sidebar_class" tag="menu-sidebar" responsive>
        <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 implements OnInit {
  constructor(private  directionService: NbLayoutDirectionService) {
  }

  ngOnInit(): void {
    if ( this.layout_direction === NbLayoutDirection.RTL) {
      this.sidebar_class = 'menu-sidebar-rtl';
    }
  }

  layout_direction: NbLayoutDirection = this.directionService.getDirection();
  sidebar_class: string = 'menu-sidebar';
}
SaKondri
  • 56
  • 1
  • 5
  • It seems `menu-sidebar` class is used before in `ngx-admin` and has conflicts with this procedure and doesn't work as expected generally! It's much better to use much specific class name, something like `myprojcet-menu-sidebar` and `myprojcet-menu-sidebar-rtl` for preventing conflict on predefined classes – AbdolHosein Oct 12 '19 at 07:11
0

All you need to do is add the 'right' word on tag:

<nb-sidebar state='collapsed' right class="menu-sidebar" tag="menu-sidebar" responsive end>
</nb-sidebar>
Sachini Witharana
  • 116
  • 6
-1

If you inspect element on their demo site ( http://akveo.com/ngx-admin/pages/dashboard ), you can see that the layout-container class uses flexbox.

// more code ...
<div _ngcontent-cch-c3="" class="layout-container">
  <nb-sidebar _ngcontent-cch-c1="" class="menu-sidebar start expanded"
    responsive="" tag="menu-sidebar" _nghost-cch-c6="">
// more code...

To set the sidebar to the right, use a higher value for order in menu-sidebar class. In this case, 2 here works.

Image: enter image description here

Hope this helps.

brijmcq
  • 3,354
  • 2
  • 17
  • 34
  • ty but I have to set to RIGHT this sidebar programmatically in runtime by some user events. can you help me more? – user3111321 Sep 02 '19 at 12:12
  • I don't write any success code. i research how to change sidebar position in runtime by a service that called in some user events. – user3111321 Sep 03 '19 at 06:08