refactor(layout): enable window mode

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -3,38 +3,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-layout-column.small {
+  .menu-sidebar ::ng-deep .scrollable {
-    flex: 0.15 !important;
+    padding-top: nb-theme(layout-paddin-top);
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      ::ng-deep .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    ::ng-deep .main-container {
-      width: $sidebar-width;
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-    }
   }
 }

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'ngx-one-column-layout',
   styleUrls: ['./one-column.layout.scss'],
   template: `
-    <nb-layout center>
+    <nb-layout windowMode>
       <nb-layout-header fixed>
         <ngx-header></ngx-header>
       </nb-layout-header>

src/app/@theme/layouts/three-columns/three-columns.layout.scss

@@ -3,123 +3,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-layout-column.small {
+  .menu-sidebar ::ng-deep .scrollable {
-    flex: 0.15 !important;
+    padding-top: nb-theme(layout-paddin-top);
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      ::ng-deep .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    ::ng-deep .main-container {
-      width: $sidebar-width;
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    ::ng-deep .main-container {
-      height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(border-radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(border-radius));
-    }
-
-    ::ng-deep nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      ::ng-deep nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      ::ng-deep .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
   }
 }

src/app/@theme/layouts/three-columns/three-columns.layout.ts

@@ -1,22 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-three-columns-layout',
   styleUrls: ['./three-columns.layout.scss'],
   template: `
-    <nb-layout>
+    <nb-layout windowMode>
       <nb-layout-header fixed>
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
@@ -36,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
     </nb-layout>
   `,
 })
-export class ThreeColumnsLayoutComponent implements OnDestroy {
+export class ThreeColumnsLayoutComponent {}
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/layouts/two-columns/two-columns.layout.scss

@@ -3,123 +3,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-layout-column.small {
+  .menu-sidebar ::ng-deep .scrollable {
-    flex: 0.15 !important;
+    padding-top: nb-theme(layout-paddin-top);
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      ::ng-deep .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    ::ng-deep .main-container {
-      width: $sidebar-width;
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    ::ng-deep .main-container {
-      height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(border-radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(border-radius));
-    }
-
-    ::ng-deep nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      ::ng-deep nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      ::ng-deep .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
   }
 }

src/app/@theme/layouts/two-columns/two-columns.layout.ts

@@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
 
-// TODO: move layouts into the framework
 @Component({
   selector: 'ngx-two-columns-layout',
   styleUrls: ['./two-columns.layout.scss'],
   template: `
-    <nb-layout>
+    <nb-layout windowMode>
       <nb-layout-header fixed>
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
@@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
     </nb-layout>
   `,
 })
-export class TwoColumnsLayoutComponent implements OnDestroy {
+export class TwoColumnsLayoutComponent {}
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/styles/_overrides.scss

@@ -0,0 +1,50 @@
+@import './themes';
+
+@mixin nb-overrides() {
+  // overrides bootstrap svg style
+  nb-icon svg {
+    vertical-align: top;
+  }
+
+  nb-auth-block .links nb-icon {
+    font-size: 2.5rem;
+  }
+
+  nb-select.size-medium button {
+    padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
+
+    nb-icon {
+      right: 0.41rem !important;
+    }
+  }
+
+  nb-layout .layout .layout-container nb-sidebar {
+    &,
+    .main-container-fixed {
+      top: nb-theme(header-height);
+    }
+  }
+
+  @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 20px) {
+    @include f-window-mode(nb-theme(layout-window-mode-padding-top) / 4);
+  }
+
+  @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 150px) {
+    @include f-window-mode(nb-theme(layout-window-mode-padding-top) / 2);
+  }
+
+  @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 300px) {
+    @include f-window-mode(nb-theme(layout-window-mode-padding-top));
+  }
+}
+
+@mixin f-window-mode ($padding-top) {
+  nb-layout.window-mode nb-layout-header.fixed {
+    top: $padding-top;
+  }
+
+  nb-sidebar .main-container-fixed {
+    height: calc(100vh - #{nb-theme(header-height)} - #{$padding-top}) !important;
+    top: calc(#{nb-theme(header-height)} + #{$padding-top}) !important;
+  }
+}

src/app/@theme/styles/styles.scss

@@ -12,6 +12,8 @@
 // loading progress bar theme
 @import './pace.theme';
 
+@import './overrides';
+
 // install the framework and custom global styles
 @include nb-install() {
 
@@ -22,21 +24,6 @@
 
   // loading progress bar
   @include ngx-pace-theme();
+
+  @include nb-overrides();
 };
-
-// overrides bootstrap svg style
-nb-icon svg {
-  vertical-align: top;
-}
-
-nb-auth-block .links nb-icon {
-  font-size: 2.5rem;
-}
-
-nb-select.size-medium button {
-  padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
-
-  nb-icon {
-    right: 0.41rem !important;
-  }
-}

src/app/@theme/styles/themes.scss

@@ -5,7 +5,7 @@
 
 $nb-themes: nb-register-theme((
   font-family-secondary: font-family-primary,
-  layout-content-width: 87.5rem,
+  layout-paddin-top: 2.25rem,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -27,7 +27,7 @@ $nb-themes: nb-register-theme((
 
 $nb-themes: nb-register-theme((
   font-family-secondary: font-family-primary,
-  layout-content-width: 87.5rem,
+  layout-paddin-top: 2.25rem,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -49,7 +49,7 @@ $nb-themes: nb-register-theme((
 
 $nb-themes: nb-register-theme((
   font-family-secondary: font-family-primary,
-  layout-content-width: 87.5rem,
+  layout-paddin-top: 2.25rem,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -71,7 +71,7 @@ $nb-themes: nb-register-theme((
 
 $nb-themes: nb-register-theme((
   font-family-secondary: font-family-primary,
-  layout-content-width: 87.5rem,
+  layout-paddin-top: 2.25rem,
 
   menu-item-icon-margin: 0 0.5rem 0 0,