From c3d416ffbbe4187f6b77c6c764295d9d16f3cdb4 Mon Sep 17 00:00:00 2001
From: Alexis Hernandez <alexis22229@gmail.com>
Date: Sun, 11 Mar 2018 11:09:25 -0600
Subject: [PATCH] web-ui: Update NavbarComponent

---
 .../components/navbar/navbar.component.html   | 20 ++++++++++++++++---
 .../app/components/navbar/navbar.component.ts | 13 +++++++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/web-ui/src/app/components/navbar/navbar.component.html b/web-ui/src/app/components/navbar/navbar.component.html
index 387751c..cc1d5c5 100644
--- a/web-ui/src/app/components/navbar/navbar.component.html
+++ b/web-ui/src/app/components/navbar/navbar.component.html
@@ -1,3 +1,17 @@
-<p>
-  navbar works!
-</p>
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <a routerLink="/" class="navbar-brand">
+        <img src="assets/logo.png" alt="Logo">
+      </a>
+      <a routerLink="/">
+        <span class="navbar-brand">XSN Block Explorer</span>
+      </a>
+    </div>
+    <ul class="nav navbar-nav">
+      <li *ngFor="let tab of tabs" [ngClass]="{ 'active': isSelected(tab.path) }">
+        <a routerLink="{{tab.path}}">{{tab.label | translate}}</a>
+      </li>
+    </ul>
+  </div>
+</nav>
diff --git a/web-ui/src/app/components/navbar/navbar.component.ts b/web-ui/src/app/components/navbar/navbar.component.ts
index 8e29f4e..ad7b58c 100644
--- a/web-ui/src/app/components/navbar/navbar.component.ts
+++ b/web-ui/src/app/components/navbar/navbar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-navbar',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavbarComponent implements OnInit {
 
-  constructor() { }
+  public tabs = [];
+
+  constructor(private location: Location) { }
 
   ngOnInit() {
   }
 
+  /* tabs */
+  isSelected(path: string): boolean {
+    if (!path.startsWith('/')) {
+      path = '/' + path;
+    }
+
+    return this.location.isCurrentPathEqualTo(path);
+  }
 }