add bulma site header

This commit is contained in:
2017-01-31 18:51:40 -07:00
parent 21791ec25b
commit 2728436674

View File

@@ -1,8 +1,33 @@
<template>
<div class="hello-world">
<h1>Welcome to Vue.js</h1>
<p>Counter: {{ count }}</p>
<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>