angularnebular

change sidebar to RIGHT in ngx-admin that is developed by nebular


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.


Solution

  • 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';
    }