feat(theme): add base styles

.angular-cli.json

@@ -22,8 +22,7 @@
         "../node_modules/normalize.css/normalize.css",
         "../node_modules/font-awesome/scss/font-awesome.scss",
         "../node_modules/ionicons/scss/ionicons.scss",
-        "../node_modules/bootstrap/scss/bootstrap.scss",
-        "styles.scss"
+        "../node_modules/bootstrap/scss/bootstrap.scss"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",

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

@@ -1,14 +1,29 @@
+@import '../../styles/pure/pure.redefines';
+
 :host /deep/ {
   nga-layout-header > nav {
-    display: flex;
     justify-content: space-between;
+
+    .logo {
+      font-size: 1.7rem;
+      color: $nga-color-primary;
+      text-decoration: none;
+      transition: all 0.2s ease;
+
+      span {
+        color: $nga-color-secondary;
+      }
+
+      &:hover span {
+        color: $nga-color-primary;
+      }
+    }
   }
 
   nga-sidebar {
 
   }
 
-  nga-layout-footer {
-
+  nga-layout-footer > nav {
   }
 }

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

@@ -16,20 +16,21 @@ import { Component } from '@angular/core';
   template: `
     <nga-layout>
       <nga-layout-header fixed>
-        <section>
-          <h1>Logo</h1>
-        </section>
-        <section>
-          <nga-user></nga-user>
-        </section> 
+        <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
       </nga-layout-header>
-      <nga-sidebar fixed>
-        <ng-content select="nga-menu"></ng-content>
+
+      <nga-sidebar left>
+        <nga-sidebar-content>
+          <ng-content select="nga-menu"></ng-content>
+        </nga-sidebar-content>
       </nga-sidebar>
+      
       <nga-layout-column>
         <ng-content select="router-outlet"></ng-content>
       </nga-layout-column>
-      <nga-layout-footer></nga-layout-footer>
+      
+      <nga-layout-footer>
+      </nga-layout-footer>
     </nga-layout>
   `,
 })

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

@@ -0,0 +1,34 @@
+: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

@@ -0,0 +1,20 @@
+@import '~@nga/theme/styles/themes/nga.theme.default';
+
+$nga-color-primary: #7d85b2;
+$nga-color-default: #edf1f7;
+$nga-color-secondary: #b5bbd5;
+
+$nga-background: white;
+
+$nga-layout-background: $nga-color-default;
+
+$nga-header-height: 4.725rem;
+$nga-header-background: $nga-background;
+
+$nga-footer-height: $nga-header-height;
+$nga-footer-background: $nga-background;
+
+$nga-user-picture-background: $nga-color-default;
+
+$nga-sidebar-background: $nga-background;
+$nga-sidebar-width: 16.25rem;

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

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

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

@@ -1 +1 @@
-@import "default.theme";
+@import "pure/pure.theme";

src/app/pages/pages-menu.ts

@@ -4,9 +4,44 @@ import { List } from 'immutable';
 
 export const menuItems: List<NgaMenuItem> = List([
   {
-    title: 'lorem ipsum 1'
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+    selected: true
   },
   {
-    title: 'lorem ipsum 2'
+    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',
+  },
+  {
+    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/styles.scss

@@ -1,6 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-/* You can add global styles to this file, and also import other style files */