|
@@ -1,36 +1,61 @@
|
|
|
<template>
|
|
|
<header>
|
|
|
- <vs-navbar fixed="top" type="light" variant="default" full>
|
|
|
- <a class="navbar-brand" href="#">Musare</a>
|
|
|
- <vs-nav type="navbar" class="pull-xs-right">
|
|
|
- <vs-nav-item link="#">The Project</vs-nav-item>
|
|
|
- <vs-nav-item link="#">Donate</vs-nav-item>
|
|
|
- <vs-nav-item link="#">
|
|
|
- <vs-dropdown text="Account" size="md" variant="primary" :arrow="arrow" :caret="false">
|
|
|
- <ul class="dropdown-menu dropdown-menu-left">
|
|
|
- <li><a class="dropdown-item" href="#">Login</a></li>
|
|
|
- <li><a class="dropdown-item" href="#">Register</a></li>
|
|
|
- </ul>
|
|
|
- </vs-dropdown>
|
|
|
- </vs-nav-item>
|
|
|
- </vs-nav>
|
|
|
- </vs-navbar>
|
|
|
+ <div id="header-home">
|
|
|
+ <div class="title">Musare</div>
|
|
|
+ <div class="link">Account <i class="fa fa-caret-down" aria-hidden="true"></i></div>
|
|
|
+ <div class="link">Donate</div>
|
|
|
+ <div class="link">The Project</div>
|
|
|
+ </div>
|
|
|
</header>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import vuestrapBase from 'vuestrap-base-components'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
title: "Musare ;)"
|
|
|
}
|
|
|
- },
|
|
|
- components: {
|
|
|
- 'vs-navbar': vuestrapBase.navbar,
|
|
|
- 'vs-nav': vuestrapBase.nav,
|
|
|
- 'vs-nav-item': vuestrapBase.navItem,
|
|
|
- 'vs-dropdown': vuestrapBase.dropdown
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="sass" scoped>
|
|
|
+ header {
|
|
|
+ width: 100%;
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ #header-home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #424242;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ float: left;
|
|
|
+ height: 100%;
|
|
|
+ color: white;
|
|
|
+ padding: 0 16px 0 16px;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link {
|
|
|
+ z-index: 101;
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+ height: 100%;
|
|
|
+ color: white;
|
|
|
+ padding: 0 16px 0 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title:hover, .link:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #393939;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|