From ed658566b3f15f402b10bf9b44cc02921eb9653f Mon Sep 17 00:00:00 2001
From: tibing <parapupum@gmail.com>
Date: Fri, 14 Apr 2017 18:28:27 +0300
Subject: [PATCH] refator(@theme): add menu transclusion in one-coll layout

---
 .../one-coll-layout/one-coll.layout.scss       | 14 ++++++++++++++
 .../layouts/one-coll-layout/one-coll.layout.ts | 18 +++++++++++++++---
 src/app/@theme/theme.module.ts                 |  6 ++++--
 src/app/app.module.ts                          |  7 +------
 src/app/pages/dashboard/dashboard.component.ts |  2 +-
 src/app/pages/pages-menu.ts                    | 12 ++++++++++++
 src/app/pages/pages.component.ts               |  7 +++++++
 src/app/pages/pages.module.ts                  |  7 +++++++
 8 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
 create mode 100644 src/app/pages/pages-menu.ts

diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
new file mode 100644
index 00000000..ce1ea414
--- /dev/null
+++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
@@ -0,0 +1,14 @@
+:host {
+  & > nga-layout-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & > nga-sidebar {
+
+  }
+
+  & > nga-layout-footer {
+
+  }
+}
diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
index 5bfb78ce..879dedba 100644
--- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
+++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
@@ -1,15 +1,27 @@
+/*
+* TODO
+* I think we need to store our header, footer,
+* sedibars and etc. separetly, each in it's own
+* component.
+*
+* And of course we need to make this layout part
+* reusable.
+* */
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'one-coll-layout',
+  styleUrls: ['./one-coll.layout.scss'],
   template: `
     <nga-layout>
       <nga-layout-header fixed></nga-layout-header>
-      <nga-sidebar fixed></nga-sidebar>
+      <nga-sidebar fixed>
+        <ng-content select="nga-menu"></ng-content>
+      </nga-sidebar>
       <nga-layout-column>
-        <ng-content></ng-content>
+        <ng-content select="router-outlet"></ng-content>
       </nga-layout-column>
-      <nga-layout-footer fixed></nga-layout-footer>
+      <nga-layout-footer></nga-layout-footer>
     </nga-layout>
   `,
 })
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index f8dbc7ef..551f2d73 100644
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@@ -8,7 +8,8 @@ import {
   NgaTabsetModule,
   NgaRouteTabsetModule,
   NgaSidebarModule,
-  NgaMenuModule
+  NgaMenuModule,
+  NgaUserModule
 } from '@nga/theme';
 
 import { RootLayoutComponent } from './layouts';
@@ -25,7 +26,8 @@ const NGA_MODULES = [
   NgaTabsetModule,
   NgaRouteTabsetModule,
   NgaSidebarModule,
-  NgaMenuModule
+  NgaMenuModule,
+  NgaUserModule
 ];
 
 const LAYOUT_COMPONENTS = [
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 209d286c..705de991 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,11 +7,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 
-import {
-  NgaMenuModule,
-  NgaSidebarModule,
-  NgaThemeModule
-} from '@nga/theme';
+import { NgaThemeModule } from '@nga/theme';
 
 import { AppComponent } from './app.component';
 import { CoreModule } from './@core/core.module';
@@ -24,7 +20,6 @@ import { AppRoutingModule } from './app-routing.module';
     BrowserModule,
     HttpModule,
     NgaThemeModule.forRoot(),
-    NgaSidebarModule.forRoot(),
     AppRoutingModule,
     CoreModule,
     PagesModule
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index b2177493..8b7854bc 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-dashboard',
+  selector: 'dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
new file mode 100644
index 00000000..0513b974
--- /dev/null
+++ b/src/app/pages/pages-menu.ts
@@ -0,0 +1,12 @@
+import { NgaMenuItem } from '@nga/theme/components/menu/menu.options';
+
+import { List } from 'immutable';
+
+export const menuItems: List<NgaMenuItem> = List([
+  {
+    title: 'lorem ipsum 1'
+  },
+  {
+    title: 'lorem ipsum 2'
+  }
+]);
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 31b56aa8..5c329805 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,12 +1,19 @@
 import { Component } from '@angular/core';
 
+import { List } from 'immutable';
+
+import { menuItems } from './pages-menu';
+import { NgaMenuItem } from '@nga/theme/components/menu/menu.options';
+
 @Component({
   selector: 'pages',
   template: `
     <one-coll-layout>
+      <nga-menu [menuItems]="menuItems"></nga-menu>
       <router-outlet></router-outlet>
     </one-coll-layout>
   `
 })
 export class PagesComponent {
+  menuItems: List<NgaMenuItem> = menuItems;
 }
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 5a4742ba..0e67b6ab 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -1,5 +1,10 @@
 import { NgModule } from '@angular/core';
 
+import {
+  NgaSidebarModule,
+  NgaMenuModule
+} from '@nga/theme';
+
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesRoutingModule } from './pages-routing.module';
@@ -7,6 +12,8 @@ import { ThemeModule } from '../@theme/theme.module';
 
 @NgModule({
   imports: [
+    NgaSidebarModule.forRoot(),
+    NgaMenuModule.forRoot(),
     PagesRoutingModule,
     ThemeModule
   ],