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> <template>
<div class="hello-world"> <nav class="nav">
<h1>Welcome to Vue.js</h1> <div class="nav-left">
<p>Counter: {{ count }}</p> <div class="nav-item">
Customer Management
</div> </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> </template>
<script> <script>
@@ -30,6 +55,8 @@
// @import '~bulma' // @import '~bulma'
@import '~bulma/sass/utilities/_all' @import '~bulma/sass/utilities/_all'
@import '~bulma/sass/base/_all' @import '~bulma/sass/base/_all'
@import '~bulma/sass/components/nav'
@import '~bulma/sass/elements/button'
@import '~font-awesome/css/font-awesome.css'; @import '~font-awesome/css/font-awesome.css';
</style> </style>