Feature theme custom page

src/app/app-routing.module.ts

@@ -1,7 +1,23 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { SomosComponent } from './somos/somos.component';
+import { ProyectosComponent } from './proyectos/proyectos.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+	{
+		path:'home',
+		component: HomeComponent
+	},
+	{
+		path:'somos',
+		component: SomosComponent
+	},
+	{
+		path:'proyectos',
+		component: ProyectosComponent
+	}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -11,12 +11,21 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
 import { HeaderComponent } from './shell/header/header.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { HomeComponent } from './home/home.component';
+import { SomosComponent } from './somos/somos.component';
+
+import { ProyectosComponent } from './proyectos/proyectos.component';
+import { ContactoComponent } from './contacto/contacto.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ShellComponent,
-    HeaderComponent
+    HeaderComponent,
+    HomeComponent,
+    SomosComponent,
+    ProyectosComponent,
+    ContactoComponent
   ],
   imports: [
     BrowserModule,

src/app/contacto/contacto.component.html

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

src/app/contacto/contacto.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactoComponent } from './contacto.component';
+
+describe('ContactoComponent', () => {
+  let component: ContactoComponent;
+  let fixture: ComponentFixture<ContactoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contacto/contacto.component.ts

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

src/app/home/home.component.html

@@ -0,0 +1,6 @@
+<p>
+  home works!
+  <button mat-raised-button color="primary">Primary</button>
+  <button mat-raised-button color="accent">Accent</button>
+  <button mat-raised-button color="warn">Yellow</button>
+</p>

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

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

src/app/proyectos/proyectos.component.html

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

src/app/proyectos/proyectos.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProyectosComponent } from './proyectos.component';
+
+describe('ProyectosComponent', () => {
+  let component: ProyectosComponent;
+  let fixture: ComponentFixture<ProyectosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProyectosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProyectosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/proyectos/proyectos.component.ts

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

src/app/shell/shell.component.html

@@ -5,14 +5,17 @@
       [opened]="!(isHandset$ | async)">
     <mat-toolbar>Menu</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item href="#">Link 1</a>
-      <a mat-list-item href="#">Link 2</a>
-      <a mat-list-item href="#">Link 3</a>
+      <a mat-list-item [routerLink]="'/home'">Home</a>
+      <a mat-list-item [routerLink]="'/somos'">Quienes Somos</a>
+      <a mat-list-item [routerLink]="'/proyectos'">Proyectos</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <app-header [isHandset]="isHandset$ | async" (toggleSidenav)="drawer.toggle()"></app-header>
     <!-- Add Content Here -->
-    <router-outlet></router-outlet>
+    <div class="flexbox-parent">
+       <router-outlet></router-outlet>   
+    </div>
+
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/somos/somos.component.html

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

src/app/somos/somos.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SomosComponent } from './somos.component';
+
+describe('SomosComponent', () => {
+  let component: SomosComponent;
+  let fixture: ComponentFixture<SomosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SomosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SomosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/somos/somos.component.ts

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

src/scss/utilities/_palette.scss

@@ -0,0 +1,100 @@
+/* For use in src/lib/core/theming/_palette.scss */
+$mat-ngblue: (
+    50 : #e8eaf6,
+    100 : #c5cae9,
+    200 : #9fa8da,
+    300 : #7986cb,
+    400 : #5c6bc0,
+    500 : #3f51b5,
+    600 : #3949ab,
+    700 : #303f9f,
+    800 : #283593,
+    900 : #1a237e,
+    A100 : #8c9eff,
+    A200 : #536dfe,
+    A400 : #3d5afe,
+    A700 : #304ffe,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #ffffff,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+$mat-ngyellow: (
+    50 : #fef8e0,
+    100 : #fcedb3,
+    200 : #fae180,
+    300 : #f7d44d,
+    400 : #f6cb26,
+    500 : #f4c200,
+    600 : #f3bc00,
+    700 : #f1b400,
+    800 : #efac00,
+    900 : #ec9f00,
+    A100 : #ffffff,
+    A200 : #fff3e0,
+    A400 : #ffe1ad,
+    A700 : #ffd793,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #000000,
+        600 : #000000,
+        700 : #000000,
+        800 : #000000,
+        900 : #000000,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$mat-ngred: (
+    50 : #fde1e1,
+    100 : #fab3b3,
+    200 : #f78181,
+    300 : #f34e4e,
+    400 : #f12828,
+    500 : #ee0202,
+    600 : #ec0202,
+    700 : #e90101,
+    800 : #e70101,
+    900 : #e20101,
+    A100 : #ffffff,
+    A200 : #ffd6d6,
+    A400 : #ffa3a3,
+    A700 : #ff8a8a,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+

src/scss/utilities/utilities.scss

@@ -1,2 +1,3 @@
 @import 'spacing';
 @import 'text';
+@import 'palette';

src/styles.scss

@@ -8,3 +8,18 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 // Core Styles
 @import 'scss/utilities/utilities';
+
+// palette colors theme
+@import 'scss/utilities/palette';
+
+// custom theme angular
+@import '~@angular/material/theming';
+@include mat-core();
+
+$ngvenezuela-primary: mat-palette($mat-ngblue);
+$ngvenezuela-accent:  mat-palette($mat-ngred, 500, 900, A100);
+$ngvenezuela-warn:    mat-palette($mat-ngyellow);
+
+$ngvenezuela-theme: mat-light-theme($ngvenezuela-primary, $ngvenezuela-accent, $ngvenezuela-warn);
+
+@include angular-material-theme($ngvenezuela-theme);