Moved Logo & Buttons from App Component to Header Component

added Inline CSS styles for Header View

Author: cstodor

src/app/app.component.html

@@ -1,6 +1,2 @@
-<div class="navbar-header">
-  <a class="navbar-brand" href="#">Auth0 - Angular 2</a>
-  <button class="btn btn-primary btn-margin" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</button>
-  <button class="btn btn-primary btn-margin" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button>
-</div>
+<app-header></app-header>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
-import { Auth } from './auth/auth.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  constructor(private auth: Auth) {}
+
 }

src/app/shared/header/header.component.html

@@ -1,3 +1,10 @@
-<p>
-  header works!
-</p>
+<header>
+  <a class="logo" href="#" routerLink="/" >Auth0 + Angular 2</a>
+  <button class="login-btn" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</button>
+  
+  <ul class="user-menu" *ngIf="auth.authenticated()">
+    <li><a href="#" routerLink="/dashboard">Dashboard</a></li>
+    <li><a href="#" routerLink="/user-profile">My Profile</a></li>
+    <button class="logout-btn" (click)="auth.logout()">Log Out</button>
+  </ul>
+</header>

src/app/shared/header/header.component.ts

@@ -1,13 +1,38 @@
 import { Component, OnInit } from '@angular/core';
+import { Auth } from '../../auth/auth.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styles: []
+  styles: [
+    `header {
+      background: #eee;
+      width: 100%;
+      padding: 20px 0;
+    }
+    .logo {
+      margin: 0 20px;
+      font-size: 18px;
+      font-weight: bold;
+      text-decoration: none;
+    }
+    .login-btn,
+    .logout-btn {
+      float: right;
+      margin: 0 20px;
+    }
+    .user-menu {
+      float: right;
+      margin: 0;
+    }
+    .user-menu > li {
+      display: inline-block;
+    }`
+  ]
 })
 export class HeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor(private auth: Auth) {}
 
   ngOnInit() {
   }