feat(layouts): layouts + theme settings panel preview

src/app/@theme/components/header/header.component.scss

@@ -5,7 +5,16 @@
   justify-content: space-between;
   width: 100%;
 
-  .left-container {
+  .left {
+    order: 0;
+    flex-direction: row;
+  }
+  .right {
+    order: 1;
+    flex-direction: row-reverse;
+  }
+
+  .header-container {
     display: flex;
     align-items: center;
 

src/app/@theme/components/header/header.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
-import { NgaSidebarService, NgaMenuService } from '@akveo/nga-theme';
+import { NgaMenuService, NgaSidebarService } from '@akveo/nga-theme';
 import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
 import { UserService } from '../../../@core/data/users.service';
 
@@ -8,7 +8,7 @@ import { UserService } from '../../../@core/data/users.service';
   selector: 'ngx-header',
   styleUrls: ['./header.component.scss'],
   template: `
-    <div class="left-container">
+    <div class="header-container" [class.left]="position === 'normal'" [class.right]="position === 'inverse'">
       <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
       <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
       <div class="theme-buttons">
@@ -18,19 +18,28 @@ import { UserService } from '../../../@core/data/users.service';
       </div>
     </div>
 
-    <nga-actions size="medium" class="right">
-      <nga-action><nga-search type="rotate-layout"></nga-search></nga-action>
-      <nga-action icon="ion-ios-email-outline"></nga-action>
-      <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+    <nga-actions
+      size="medium"
+      class="header-container"
+      [class.right]="position === 'normal'"
+      [class.left]="position === 'inverse'">
+      <nga-action icon="ion-ios-gear-outline" (click)="toggleSettings()"></nga-action>
       <nga-action>
         <nga-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nga-user>
       </nga-action>
-      <nga-action icon="ion-ios-gear-outline"></nga-action>
+      <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+      <nga-action icon="ion-ios-email-outline"></nga-action>
+      <nga-action>
+        <nga-search type="rotate-layout"></nga-search>
+      </nga-action>
     </nga-actions>
   `,
 })
 export class HeaderComponent implements OnInit {
 
+
+  @Input() position: string = 'normal';
+
   user: any;
 
   userMenu = [
@@ -54,7 +63,12 @@ export class HeaderComponent implements OnInit {
   }
 
   toggleSidebar(): boolean {
-    this.sidebarService.toggle(true);
+    this.sidebarService.toggle(true, 'menu-sidebar');
+    return false;
+  }
+
+  toggleSettings(): boolean {
+    this.sidebarService.toggle(false, 'settings-sidebar');
     return false;
   }
 

src/app/@theme/components/index.ts

@@ -2,3 +2,4 @@ export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
+export * from './theme-settings/theme-settings.component';

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -0,0 +1,22 @@
+@import '../../styles/variables';
+
+@include nga-install-component() {
+  .settings-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    flex-wrap: wrap;
+
+    a {
+      font-size: 2rem;
+      margin-right: 1rem;
+      color: nga-theme(color-white);
+
+      &.selected {
+        color: nga-theme(color-success);
+      }
+    }
+  }
+}
+

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { StateService } from '../../../@core/data/state.service';
+
+@Component({
+  selector: 'ngx-theme-settings',
+  styleUrls: ['./theme-settings.component.scss'],
+  template: `
+    <strong class="small">LAYOUTS</strong>
+    <div class="settings-row">
+      <a *ngFor="let layout of layouts"
+         href="#"
+         [class.selected]="layout.selected"
+         [attr.title]="layout.name"
+         (click)="layoutSelect(layout)">
+        <i [attr.class]="layout.icon"></i>
+      </a>
+    </div>
+    <strong class="small">SIDEBAR</strong>
+    <div class="settings-row">
+      <a *ngFor="let sidebar of sidebars"
+         href="#"
+         [class.selected]="sidebar.selected"
+         [attr.title]="sidebar.name"
+         (click)="sidebarSelect(sidebar)">
+        <i [attr.class]="sidebar.icon"></i>
+      </a>
+    </div>
+  `,
+})
+export class ThemeSettingsComponent {
+
+  layouts = [];
+  sidebars = [];
+
+  constructor(protected stateService: StateService) {
+    this.stateService.getLayoutStates()
+      .subscribe((layouts: any[]) => this.layouts = layouts);
+
+    this.stateService.getSidebarStates()
+      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
+  }
+
+  layoutSelect(layout: any): boolean {
+    this.layouts = this.layouts.map((l: any) => {
+      l.selected = false;
+      return l;
+    });
+
+    layout.selected = true;
+    this.stateService.setLayoutState(layout);
+    return false;
+  }
+
+  sidebarSelect(sidebars: any): boolean {
+    this.sidebars = this.sidebars.map((s: any) => {
+      s.selected = false;
+      return s;
+    });
+
+    sidebars.selected = true;
+    this.stateService.setSidebarState(sidebars);
+    return false;
+  }
+}