175 lines
No EOL
6.4 KiB
Vue
175 lines
No EOL
6.4 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-menu offset-y v-if="this.$store.state.loggedIn && this.$store.getters.getMe.admin">
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
v-on="on"
|
|
flat
|
|
>
|
|
Admin
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-tile @click="">
|
|
<v-list-tile-title >Settings</v-list-tile-title>
|
|
</v-list-tile>
|
|
<v-list-tile @click="">
|
|
<v-list-tile-title >Users</v-list-tile-title>
|
|
</v-list-tile>
|
|
<v-list-tile @click="">
|
|
<v-list-tile-title >Invites</v-list-tile-title>
|
|
</v-list-tile>
|
|
<v-list-tile @click="">
|
|
<v-list-tile-title >Apps</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
<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 @click="clickLoogut()">
|
|
<v-list-tile-title >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> |