From 272843667485af42df3cf7ac813da7da24bb82e3 Mon Sep 17 00:00:00 2001
From: Joe Fleming <joe.fleming@gmail.com>
Date: Tue, 31 Jan 2017 18:51:40 -0700
Subject: [PATCH] add bulma site header

---
 src/App.vue | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e36be0..a4c2e0e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,33 @@
 <template>
-  <div class="hello-world">
-    <h1>Welcome to Vue.js</h1>
-    <p>Counter: {{ count }}</p>
-  </div>
+  <nav class="nav">
+    <div class="nav-left">
+      <div class="nav-item">
+        Customer Management
+      </div>
+    </div>
+
+    <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
+    <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
+    <span class="nav-toggle">
+      <span></span>
+      <span></span>
+      <span></span>
+    </span>
+
+    <!-- This "nav-menu" is hidden on mobile -->
+    <!-- Add the modifier "is-active" to display it on mobile -->
+    <div class="nav-right nav-menu">
+      <a class="nav-item">Customers</a>
+      <a class="nav-item">Orders</a>
+      <a class="nav-item">About</a>
+      <span class="nav-item">
+        <a class="button" >
+          <span class="icon"><i class="fa fa-github"></i></span>
+          <span>Github</span>
+        </a>
+      </span>
+    </div>
+  </nav>
 </template>
 
 <script>
@@ -30,6 +55,8 @@
   // @import '~bulma'
   @import '~bulma/sass/utilities/_all'
   @import '~bulma/sass/base/_all'
+  @import '~bulma/sass/components/nav'
+  @import '~bulma/sass/elements/button'
 
   @import '~font-awesome/css/font-awesome.css';
 </style>