refator(@theme): add menu transclusion in one-coll layout

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 {
+
+  }
+}

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>
   `,
 })

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 = [

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 {
+import { NgaThemeModule } from '@nga/theme';
-  NgaMenuModule,
-  NgaSidebarModule,
-  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

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']
 })

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'
+  }
+]);

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;
 }

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
   ],