Add basic "menu" component, for typical use case
This commit is contained in:
parent
554736e842
commit
11392e864e
|
@ -1,9 +1,11 @@
|
|||
import ByjoveApp from './app'
|
||||
import ByjoveMenu from './menu'
|
||||
import ByjoveLogo from './logo'
|
||||
import ByjoveFeedback from './feedback'
|
||||
|
||||
export {
|
||||
ByjoveApp,
|
||||
ByjoveMenu,
|
||||
ByjoveLogo,
|
||||
ByjoveFeedback,
|
||||
}
|
||||
|
|
77
src/components/menu/ByjoveMenu.vue
Normal file
77
src/components/menu/ByjoveMenu.vue
Normal file
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<section>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item">
|
||||
|
||||
<b-dropdown v-if="user"
|
||||
aria-role="list">
|
||||
<button class="button is-primary"
|
||||
:class="{'is-danger': user.is_root}"
|
||||
slot="trigger">
|
||||
<span>{{ user.short_name }}</span>
|
||||
<!-- <b-icon icon="menu-down"></b-icon> -->
|
||||
</button>
|
||||
|
||||
<b-dropdown-item aria-role="listitem" has-link>
|
||||
<router-link to="/">Home</router-link>
|
||||
</b-dropdown-item>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<b-dropdown-item aria-role="listitem" has-link>
|
||||
<router-link to="/logout">Logout</router-link>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item aria-role="listitem" has-link>
|
||||
<router-link to="/about">About</router-link>
|
||||
</b-dropdown-item>
|
||||
|
||||
</b-dropdown>
|
||||
|
||||
<b-button v-if="!user"
|
||||
type="is-primary"
|
||||
tag="router-link" to="/login">
|
||||
Login
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<byjove-feedback :url="feedbackUrl"></byjove-feedback>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ByjoveFeedback from '../feedback'
|
||||
export default {
|
||||
name: 'ByjoveMenu',
|
||||
props: {
|
||||
appsettings: Object,
|
||||
feedbackUrl: {
|
||||
type: String,
|
||||
default: '/api/feedback',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ByjoveFeedback,
|
||||
},
|
||||
computed: {
|
||||
title: function() {
|
||||
if (this.appsettings.production) {
|
||||
return this.appsettings.systemTitle
|
||||
} else {
|
||||
return "[STAGE] " + this.appsettings.systemTitle
|
||||
}
|
||||
},
|
||||
user: function() {
|
||||
return this.$store.state.user
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
3
src/components/menu/index.js
Normal file
3
src/components/menu/index.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
import ByjoveMenu from './ByjoveMenu'
|
||||
|
||||
export default ByjoveMenu
|
Loading…
Reference in a new issue