feat(app): add mock pages and some header feats

.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "nga-demo"
+    "name": "ngx-admin-demo"
   },
   "apps": [
     {

package.json

@@ -38,6 +38,7 @@
     "bootstrap": "4.0.0-alpha.6",
     "core-js": "2.4.1",
     "font-awesome": "4.7.0",
+    "immutable": "3.8.1",
     "ionicons": "2.0.1",
     "normalize.css": "6.0.0",
     "rxjs": "5.1.1",

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

@@ -4,9 +4,36 @@
   nga-layout-header > nav {
     justify-content: space-between;
 
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    .left {
+      > * {
+        padding: 0 1.25rem;
+        border-right: 1px solid rgba($nga-color-default, 0.2);
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          border: none;
+        }
+      }
+
+      i.menu-collapse {
+        font-size: 2.8rem;
+
+        &:hover {
+          cursor: pointer;
+          color: $nga-color-secondary;
+        }
+      }
+
       .logo {
         font-size: 1.7rem;
-      color: $nga-color-primary;
         text-decoration: none;
         transition: all 0.2s ease;
 
@@ -15,7 +42,23 @@
         }
 
         &:hover span {
-        color: $nga-color-primary;
+          color: $nga-color-default;
+        }
+      }
+    }
+
+    .right {
+      > * {
+        padding: 0 1.25rem;
+        border-left: 1px solid rgba($nga-color-primary, 0.2);
+
+        &:first-child {
+          border: none;
+        }
+
+        &:last-child {
+          padding-left: 0;
+        }
       }
     }
   }

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

@@ -9,6 +9,7 @@
 * */
 import { Component } from '@angular/core';
 
+import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
 
 @Component({
   selector: 'one-coll-layout',
@@ -16,10 +17,16 @@ import { Component } from '@angular/core';
   template: `
     <nga-layout>
       <nga-layout-header fixed>
+        <div class="left">
+          <i class="menu-collapse ion ion-navicon" (click)="toggleSidebar()"></i>
           <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
+        </div>
+        <div class="right">
+          
+        </div>
       </nga-layout-header>
 
-      <nga-sidebar left>
+      <nga-sidebar>
         <nga-sidebar-content>
           <ng-content select="nga-menu"></ng-content>
         </nga-sidebar-content>
@@ -29,10 +36,16 @@ import { Component } from '@angular/core';
         <ng-content select="router-outlet"></ng-content>
       </nga-layout-column>
       
-      <nga-layout-footer>
+      <nga-layout-footer fixed>
       </nga-layout-footer>
     </nga-layout>
   `,
 })
 export class OneCollLayoutComponent {
+  constructor(private sidebarService: NgaSidebarService) {
+  }
+
+  toggleSidebar() {
+    this.sidebarService.toggle(true);
+  }
 }

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

@@ -1,34 +0,0 @@
-:host /deep/ {
-  color: $nga-color-default;
-
-  nga-layout {
-    nga-layout-header > nav {
-      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
-    }
-
-    nga-sidebar {
-      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
-
-      ul {
-        li a {
-          color: $nga-color-primary;
-          transition: all 0.2s ease;
-          padding: .87rem 0 .87rem 1rem;
-
-          &:hover {
-            background: $nga-color-default;
-          }
-
-          &.active {
-            font-weight: bold;
-          }
-        }
-      }
-    }
-
-    nga-layout-footer > nav {
-      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
-      border: none !important;
-    }
-  }
-}

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

@@ -1,15 +1,18 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
-$nga-color-primary: #7d85b2;
+$nga-color-primary: #edf1f7;
-$nga-color-default: #edf1f7;
+$nga-color-default: #7d85b2;
 $nga-color-secondary: #b5bbd5;
 
 $nga-background: white;
 
-$nga-layout-background: $nga-color-default;
+$nga-layout-background: $nga-color-primary;
+$nga-layout-foreground: $nga-color-default;
 
 $nga-header-height: 4.725rem;
 $nga-header-background: $nga-background;
+$nga-header-foreground: $nga-color-default;
+$nga-header-padding: 1.25rem;
 
 $nga-footer-height: $nga-header-height;
 $nga-footer-background: $nga-background;
@@ -18,3 +21,46 @@ $nga-user-picture-background: $nga-color-default;
 
 $nga-sidebar-background: $nga-background;
 $nga-sidebar-width: 16.25rem;
+
+:host /deep/ {
+  color: $nga-color-default;
+
+  nga-layout {
+    nga-layout-header > nav {
+      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+    }
+
+    nga-sidebar {
+      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+
+      ul li a {
+        display: flex;
+        align-items: center;
+
+        transition: all 0.2s ease;
+        padding: .375rem 0 .375rem 1rem;
+
+        &:hover {
+          background: $nga-color-primary;
+          color: $nga-color-default;
+        }
+
+        &.active {
+          font-weight: bold;
+          color: $nga-color-default;
+          background: $nga-color-primary;
+        }
+
+        i {
+          font-size: 2rem;
+          margin-right: 1.25rem;
+        }
+      }
+    }
+
+    nga-layout-footer > nav {
+      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+      border: none !important;
+    }
+  }
+}

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

@@ -1,6 +1,5 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
 @import 'pure.redefines';
-@import 'pure.custom';
 
 @include nga-theme();

src/app/pages/components/components.component.html

@@ -0,0 +1,3 @@
+<p>
+  components works!
+</p>

src/app/pages/components/components.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-components',
+  templateUrl: './components.component.html',
+  styleUrls: ['./components.component.scss']
+})
+export class ComponentsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/dashboard/dashboard.component.html

@@ -0,0 +1,3 @@
+<p>
+  dashboard works!
+</p>

src/app/pages/maps/maps.component.html

@@ -0,0 +1,3 @@
+<p>
+  maps works!
+</p>

src/app/pages/maps/maps.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-maps',
+  templateUrl: './maps.component.html',
+  styleUrls: ['./maps.component.scss']
+})
+export class MapsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/pages-menu.ts

@@ -5,43 +5,23 @@ import { List } from 'immutable';
 export const menuItems: List<NgaMenuItem> = List([
   {
     title: 'Dashboard',
-    icon: 'ion ion-android-home',
+    icon: 'ion ion-ios-home-outline',
     link: '/pages/dashboard',
     selected: true
   },
   {
-    title: 'Dashboard',
+    title: 'UI Features',
-    icon: 'ion ion-android-home',
+    icon: 'ion ion-ios-keypad-outline',
-    link: '/pages/dashboard',
+    link: '/pages/ui-features'
   },
   {
-    title: 'Dashboard',
+    title: 'Components',
-    icon: 'ion ion-android-home',
+    icon: 'ion ion-ios-gear-outline',
-    link: '/pages/dashboard',
+    link: '/pages/components'
   },
   {
-    title: 'Dashboard',
+    title: 'Maps',
-    icon: 'ion ion-android-home',
+    icon: 'ion ion-ios-location-outline',
-    link: '/pages/dashboard',
+    link: '/pages/maps'
-  },
-  {
-    title: 'Dashboard',
-    icon: 'ion ion-android-home',
-    link: '/pages/dashboard',
-  },
-  {
-    title: 'Dashboard',
-    icon: 'ion ion-android-home',
-    link: '/pages/dashboard',
-  },
-  {
-    title: 'Dashboard',
-    icon: 'ion ion-android-home',
-    link: '/pages/dashboard',
-  },
-  {
-    title: 'Dashboard',
-    icon: 'ion ion-android-home',
-    link: '/pages/dashboard',
   }
 ]);

src/app/pages/pages-routing.module.ts

@@ -3,14 +3,20 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { UiFeaturesComponent } from './ui-features/ui-features.component';
+import { ComponentsComponent } from './components/components.component';
+import { MapsComponent } from './maps/maps.component';
 
 const routes: Routes = [
   {
     path: '',
     component: PagesComponent,
     children: [
-      {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+      {path: 'dashboard', component: DashboardComponent},
-      {path: 'dashboard', component: DashboardComponent}
+      {path: 'ui-features', component: UiFeaturesComponent},
+      {path: 'components', component: ComponentsComponent},
+      {path: 'maps', component: MapsComponent},
+      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
     ]
   }
 ];

src/app/pages/pages.module.ts

@@ -9,6 +9,9 @@ import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
+import { UiFeaturesComponent } from './ui-features/ui-features.component';
+import { MapsComponent } from './maps/maps.component';
+import { ComponentsComponent } from './components/components.component';
 
 @NgModule({
   imports: [
@@ -19,7 +22,10 @@ import { ThemeModule } from '../@theme/theme.module';
   ],
   declarations: [
     PagesComponent,
-    DashboardComponent
+    DashboardComponent,
+    UiFeaturesComponent,
+    MapsComponent,
+    ComponentsComponent
   ]
 })
 export class PagesModule {

src/app/pages/ui-features/ui-features.component.html

@@ -0,0 +1,3 @@
+<p>
+  ui-features works!
+</p>

src/app/pages/ui-features/ui-features.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-features',
+  templateUrl: './ui-features.component.html',
+  styleUrls: ['./ui-features.component.scss']
+})
+export class UiFeaturesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}