diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..e20557b
--- /dev/null
+++ b/index.ts
@@ -0,0 +1 @@
+export * from './home';
diff --git a/shared/index.ts b/shared/index.ts
new file mode 100644
index 0000000..677ca79
--- /dev/null
+++ b/shared/index.ts
@@ -0,0 +1 @@
+export * from './header';
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b6931b5..0223490 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,2 @@
-
- {{title}}
-
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e0113f4..527435f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
styleUrls: ['app.component.css']
})
export class AppComponent {
- title = 'app works!';
+
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f280356..d8000b5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,12 +1,23 @@
+import { ApplicationRef, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
+import { HomeComponent } from './home';
+import { HeaderComponent } from './shared';
+
+// Barrels are not reaching into sub barrels: https://github.com/angular/angular-cli/issues/585
+// import {
+// AppComponent,
+// HeaderComponent,
+// HomeComponent
+// } from './'
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ HomeComponent,
+ HeaderComponent
],
imports: [
BrowserModule,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..315d0dd
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1,3 @@
+
+ Welcome to BabelCoder Wiki!
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
new file mode 100644
index 0000000..b2c7a5e
--- /dev/null
+++ b/src/app/home/home.component.scss
@@ -0,0 +1,6 @@
+.title {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000..7a6d7d5
--- /dev/null
+++ b/src/app/home/home.component.spec.ts
@@ -0,0 +1,13 @@
+/* tslint:disable:no-unused-variable */
+
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { addProviders, async, inject } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('Component: Home', () => {
+ it('should create an instance', () => {
+ let component = new HomeComponent();
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..89a8bd7
--- /dev/null
+++ b/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() {
+ }
+
+}
diff --git a/src/app/home/index.ts b/src/app/home/index.ts
new file mode 100644
index 0000000..ab5a522
--- /dev/null
+++ b/src/app/home/index.ts
@@ -0,0 +1 @@
+export * from './home.component';
diff --git a/src/app/home/shared/index.ts b/src/app/home/shared/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/index.ts b/src/app/index.ts
index 87743c9..e93ced5 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -1,3 +1,5 @@
export * from './environments/environment';
export * from './app.component';
export * from './app.module';
+export * from './home';
+export * from './shared';
diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html
new file mode 100644
index 0000000..aac2406
--- /dev/null
+++ b/src/app/shared/header/header.component.html
@@ -0,0 +1,21 @@
+
diff --git a/src/app/shared/header/header.component.scss b/src/app/shared/header/header.component.scss
new file mode 100644
index 0000000..d14bb8e
--- /dev/null
+++ b/src/app/shared/header/header.component.scss
@@ -0,0 +1,35 @@
+@import '../../theme/variables';
+
+.header {
+ background: $dark-gray1-color;
+ padding: 1rem;
+ width: 100%;
+ position: fixed;
+ left: 0;
+ top: 0;
+ box-sizing: border-box;
+}
+
+.brand {
+ color: $white-color;
+ text-decoration: none;
+}
+
+.menu {
+ float: right;
+ display: block;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ &__item {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ &__link {
+ padding: 1rem;
+ color: $green1-color;
+ text-decoration: none;
+ }
+}
diff --git a/src/app/shared/header/header.component.spec.ts b/src/app/shared/header/header.component.spec.ts
new file mode 100644
index 0000000..c0cd0a2
--- /dev/null
+++ b/src/app/shared/header/header.component.spec.ts
@@ -0,0 +1,13 @@
+/* tslint:disable:no-unused-variable */
+
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { addProviders, async, inject } from '@angular/core/testing';
+import { HeaderComponent } from './header.component';
+
+describe('Component: Header', () => {
+ it('should create an instance', () => {
+ let component = new HeaderComponent();
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/header/header.component.ts b/src/app/shared/header/header.component.ts
new file mode 100644
index 0000000..de6d2dc
--- /dev/null
+++ b/src/app/shared/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-header',
+ templateUrl: 'header.component.html',
+ styleUrls: ['header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/shared/header/index.ts b/src/app/shared/header/index.ts
new file mode 100644
index 0000000..be62c26
--- /dev/null
+++ b/src/app/shared/header/index.ts
@@ -0,0 +1 @@
+export * from './header.component';
diff --git a/src/app/shared/header/shared/index.ts b/src/app/shared/header/shared/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts
index e69de29..677ca79 100644
--- a/src/app/shared/index.ts
+++ b/src/app/shared/index.ts
@@ -0,0 +1 @@
+export * from './header';
diff --git a/src/app/theme/_variables.scss b/src/app/theme/_variables.scss
new file mode 100644
index 0000000..73274db
--- /dev/null
+++ b/src/app/theme/_variables.scss
@@ -0,0 +1,11 @@
+$gray1-color: #cbcbcb;
+$gray2-color: #e0e0e0;
+
+$dark-gray1-color: #2d3e50;
+
+$green1-color: #18d8a9;
+
+$red1-color: #da4453;
+
+$white-color: #fff;
+$black-color: #000;