155 lines
5.6 KiB
Vue
155 lines
5.6 KiB
Vue
|
<template>
|
||
|
<v-toolbar v-scroll="handleScroll" app :flat="flat" :prominent="big" :dense="!big" :color="bgcolor" clipped-left >
|
||
|
<v-toolbar-title class="headline text-uppercase" >
|
||
|
<span>{{ nameBig }}</span>
|
||
|
<span class="font-weight-light">{{ nameSmall }}</span>
|
||
|
</v-toolbar-title>
|
||
|
<v-spacer></v-spacer>
|
||
|
<v-toolbar-items class="hidden-sm-and-down">
|
||
|
<v-btn
|
||
|
v-if="this.$store.state.loggedIn && this.$store.getters.getMe.developer"
|
||
|
:to="{path: '/apps'}"
|
||
|
flat
|
||
|
>Apps</v-btn>
|
||
|
|
||
|
<v-btn
|
||
|
v-if="this.$store.state.loggedIn && this.$store.getters.getMe.admin"
|
||
|
:to="{path: '/admin'}"
|
||
|
flat
|
||
|
>Admin</v-btn>
|
||
|
|
||
|
|
||
|
<v-menu offset-y v-if="this.$store.state.loggedIn">
|
||
|
<template v-slot:activator="{ on }">
|
||
|
<v-btn
|
||
|
v-on="on"
|
||
|
flat
|
||
|
>
|
||
|
Profile
|
||
|
</v-btn>
|
||
|
</template>
|
||
|
<v-list>
|
||
|
<v-list-tile>
|
||
|
<v-list-tile-title @click="clickLoogut()">Logout</v-list-tile-title>
|
||
|
</v-list-tile>
|
||
|
</v-list>
|
||
|
</v-menu>
|
||
|
|
||
|
<v-btn
|
||
|
v-if="!this.$store.state.loggedIn"
|
||
|
:to="{path: '/login'}"
|
||
|
flat
|
||
|
>Login</v-btn>
|
||
|
|
||
|
<v-btn
|
||
|
v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('invites')"
|
||
|
:to="{path: '/invited'}"
|
||
|
flat
|
||
|
>Invited</v-btn>
|
||
|
<v-btn
|
||
|
v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('registration_possible')"
|
||
|
:to="{path: '/register'}"
|
||
|
flat
|
||
|
>Register</v-btn>
|
||
|
|
||
|
|
||
|
<!--<v-menu offset-y>
|
||
|
<template v-slot:activator="{ on }">
|
||
|
<v-btn
|
||
|
color="primary"
|
||
|
dark
|
||
|
v-on="on"
|
||
|
>
|
||
|
Dropdown
|
||
|
</v-btn>
|
||
|
</template>
|
||
|
<v-list>
|
||
|
<v-list-tile
|
||
|
v-for="(item, index) in menu"
|
||
|
:key="index"
|
||
|
@click=""
|
||
|
>
|
||
|
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
||
|
</v-list-tile>
|
||
|
</v-list>
|
||
|
</v-menu>!-->
|
||
|
|
||
|
</v-toolbar-items>
|
||
|
<v-menu class="hidden-md-and-up">
|
||
|
<v-toolbar-side-icon slot="activator" @click.stop="toggleSideMenu()"></v-toolbar-side-icon>
|
||
|
</v-menu>
|
||
|
</v-toolbar>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import UserServie from '../services/User'
|
||
|
|
||
|
export default {
|
||
|
name: 'Menu',
|
||
|
components: {
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
big: true,
|
||
|
bgcolor: "transparent",
|
||
|
flat: true,
|
||
|
nameBig: '',
|
||
|
nameSmall: '',
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
setting: (name) => {
|
||
|
//this.$store.getters.getSettingValue(this.$store.state, name);
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
toggleSideMenu: function() {
|
||
|
console.log("TOGGLE");
|
||
|
this.$store.state.sideMenu = !this.$store.state.sideMenu;
|
||
|
},
|
||
|
generateMenu: function () {
|
||
|
this.menu = [];
|
||
|
if(!this.$store.state.loggedIn) {
|
||
|
this.menu.push({ icon: 'home', title: 'Login' , link: "Login" });
|
||
|
if(this.$store.getters.getSettingValue("invites")) {
|
||
|
this.menu.push({ icon: 'home', title: 'Invited' , link: "Invited" });
|
||
|
}
|
||
|
if(this.$store.getters.getSettingValue("registration_possible")) {
|
||
|
this.menu.push({ icon: 'home', title: 'Register' , link: "Register" });
|
||
|
}
|
||
|
} else {
|
||
|
if(this.$store.getters.getMe.developer) {
|
||
|
this.menu.push({ icon: 'home', title: 'Apps' , link: "Apps" });
|
||
|
}
|
||
|
if(this.$store.getters.getMe.admin) {
|
||
|
this.menu.push({ icon: 'home', title: 'Admin' , link: "Admin" });
|
||
|
}
|
||
|
this.menu.push({ icon: 'home', title: 'Profile' , link: "profile", submenu: true, menu: [
|
||
|
{ icon: 'home', title: 'Logout' , link: "Logout" }
|
||
|
] });
|
||
|
}
|
||
|
},
|
||
|
handleScroll: function (evt, el) {
|
||
|
if(evt.pageY > 100) {
|
||
|
this.big = false;
|
||
|
this.bgcolor = "#fff";
|
||
|
this.flat = false;
|
||
|
} else {
|
||
|
this.big = true;
|
||
|
this.bgcolor = "transparent";
|
||
|
this.flat = true;
|
||
|
}
|
||
|
},
|
||
|
clickLoogut: function () {
|
||
|
UserServie.logout();
|
||
|
this.$store.dispatch('checkAccount')
|
||
|
this.$router.push({"path": "login"})
|
||
|
}
|
||
|
},
|
||
|
mounted: function () {
|
||
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
||
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
||
|
this.generateMenu();
|
||
|
}
|
||
|
}
|
||
|
</script>
|