nebularngx-admin

How to reduce nebular side bar width?


I am using ngx-admin and have a question related on how I can dynamically reduce the sidebar size. Also when I minimize the browser, side-bar should be automatically resize according to the browser size. (It should be responsive).


Solution

  • I found my own answer for that. I 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);
          }
       }
    
       @include nb-install-component() {
          .menu-sidebar ::ng-deep .main-container.main-container-fixed {
              width: 10rem;
        }
      }
    
      @include nb-install-component() {
       .expanded {
            width: 10rem;
       }
     }
    

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

    import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
    import { isPlatformBrowser } from '@angular/common';
    import { NbLayoutComponent } from '@nebular/theme';
    import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
    
    @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 state="expanded" class="menu-sidebar" style="width: 'auto'" 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 AfterViewInit {
         @ViewChild(NbLayoutComponent, { static: false }) layout: NbLayoutComponent;
    
        constructor(
         @Inject(PLATFORM_ID) private platformId,
         private windowModeBlockScrollService: WindowModeBlockScrollService) {}
    
       ngAfterViewInit() {
        if (isPlatformBrowser(this.platformId)) {
          this.windowModeBlockScrollService.register(this.layout);
        }
      }
    }