blob: a021226c930c005ffe57a0c056ba7e334342ead0 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<template>
<b-menu class="dashboard-menu">
<b-menu-list label="Menu">
<b-menu-item
class="item"
icon="information-outline"
label="Dashboard"
tag="nuxt-link"
to="/dashboard"
exact />
<b-menu-item
class="item"
icon="image-multiple-outline"
label="Albums"
tag="nuxt-link"
to="/dashboard/albums"
exact />
<b-menu-item
class="item"
icon="tag-outline"
label="Tags"
tag="nuxt-link"
to="/dashboard/tags"
exact />
<b-menu-item v-if="user && user.isAdmin" icon="menu" expanded>
<template slot="label" slot-scope="props">
Administration
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
</template>
<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
<b-menu-item icon="chart-line" label="Statistics" tag="nuxt-link" to="/dashboard/admin/statistics" exact />
</b-menu-item>
<b-menu-item
class="item"
icon="account-cog-outline"
label="My account"
tag="nuxt-link"
to="/dashboard/account"
exact />
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact />
</b-menu-list>
</b-menu>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: mapState({
user: state => state.auth.user
}),
methods: {
isRouteActive(id) {
if (this.$route.path.includes(id)) {
return true;
}
return false;
}
}
};
</script>
<style lang="scss" scoped>
@import '~/assets/styles/_colors.scss';
.dashboard-menu {
::v-deep a:hover {
cursor: pointer;
text-decoration: none;
}
::v-deep .icon {
margin-right: 0.5rem;
}
::v-deep .icon.is-pulled-right {
margin-right: 0;
}
hr { margin-top: 0.6em; }
}
</style>
|