98 lines
1.8 KiB
Vue
98 lines
1.8 KiB
Vue
<template>
|
|
<div id="menu">
|
|
<div class="container">
|
|
<div class="pure-menu pure-menu-horizontal">
|
|
<ul class="pure-menu-list">
|
|
<li class="pure-menu-item logout">
|
|
<a class="pure-menu-link" href="#" @click.prevent="logout">{{ $t('admin.logout') }}</a>
|
|
</li>
|
|
|
|
<menu-link route="/admin/uploads" :title="$t('admin.menu.uploads')"></menu-link>
|
|
<menu-link route="/admin/codes" :title="$t('admin.menu.codes')"></menu-link>
|
|
<menu-link route="/admin/users" :title="$t('admin.menu.users')" v-if="hasAuth('manageUsers')"></menu-link>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import shared from '../../shared';
|
|
|
|
var menuLink = {
|
|
props: ['route', 'title'],
|
|
template: '<router-link tag="li" :to="route" class="pure-menu-item" active-class="pure-menu-selected">' +
|
|
'<a class="pure-menu-link">{{ title }}</a>' +
|
|
'</router-link>'
|
|
};
|
|
|
|
|
|
export default {
|
|
data()
|
|
{
|
|
return {
|
|
};
|
|
},
|
|
|
|
components: {
|
|
'menu-link': menuLink
|
|
},
|
|
|
|
methods: {
|
|
hasAuth(token)
|
|
{
|
|
return shared.user !== null && shared.user.auth.indexOf(token) > -1;
|
|
},
|
|
|
|
|
|
logout()
|
|
{
|
|
var self = this;
|
|
shared.adminToken = null;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~purecss/build/menus.css';
|
|
|
|
|
|
#menu
|
|
{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
background-color: black;
|
|
|
|
.pure-menu-horizontal .pure-menu-list
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.pure-menu-link
|
|
{
|
|
color: white;
|
|
|
|
&:hover
|
|
{
|
|
background-color: #323232;
|
|
}
|
|
}
|
|
|
|
.pure-menu-selected
|
|
{
|
|
.pure-menu-link, .pure-menu-link:hover
|
|
{
|
|
background-color: #228dd4;
|
|
}
|
|
}
|
|
|
|
.logout
|
|
{
|
|
float: right;
|
|
}
|
|
}
|
|
</style> |