feat(layouts): layouts + theme settings panel preview

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

@@ -0,0 +1,65 @@
+@import '../../styles/variables';
+
+@include nga-install-root-component() {
+
+  nga-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nga-sidebar.menu-sidebar {
+
+    margin-top: nga-theme(sidebar-header-gap);
+
+    /deep/ .main-container {
+      height:
+        calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important;
+      border-top-right-radius: 0.75rem;
+    }
+
+    /deep/ nga-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 {
+        padding-left: 0.25rem;
+      }
+
+      i, span {
+        vertical-align: middle;
+      }
+    }
+
+    &.compacted {
+
+      /deep/ nga-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+
+// TODO: move layouts into the framework
+@Component({
+  selector: 'ngx-three-columns-layout',
+  styleUrls: ['./three-columns.layout.scss'],
+  template: `
+    <nga-layout>
+      <nga-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nga-layout-header>
+
+      <nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+        <nga-sidebar-header>
+          <button class="btn btn-hero-success main-btn">
+            <i class="ion ion-social-github"></i> <span>Support Us</span>
+          </button>
+        </nga-sidebar-header>
+        <ng-content select="nga-menu"></ng-content>
+      </nga-sidebar>
+
+      <nga-layout-column class="small">
+      </nga-layout-column>
+
+      <nga-layout-column right>
+        <ng-content select="router-outlet"></ng-content>
+      </nga-layout-column>
+
+      <nga-layout-column class="small">
+      </nga-layout-column>
+
+      <nga-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nga-layout-footer>
+    </nga-layout>
+  `,
+})
+export class ThreeColumnsLayoutComponent {
+}