167 lines
5.0 KiB
Vue
167 lines
5.0 KiB
Vue
<template>
|
|
<v-app-bar
|
|
:color="bgcolor"
|
|
|
|
style="z-index: 1;"
|
|
v-scroll="handleScroll"
|
|
:flat="flat"
|
|
fixed
|
|
|
|
|
|
>
|
|
<v-app-bar-nav-icon class="d-flex d-md-none" @click="toggleMenu()"></v-app-bar-nav-icon>
|
|
|
|
<v-toolbar-title><b>{{nameBig}}</b>{{nameSmall}}</v-toolbar-title>
|
|
|
|
|
|
|
|
<v-spacer></v-spacer>
|
|
<!-- User not Logged in !-->
|
|
<v-btn
|
|
class="d-none d-md-flex"
|
|
v-if="!this.$store.state.loggedIn"
|
|
:to="{path: '/login'}"
|
|
tile
|
|
text
|
|
height="100%"
|
|
>Login</v-btn>
|
|
|
|
<v-btn
|
|
class="d-none d-md-flex"
|
|
v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('invites')"
|
|
:to="{path: '/invited'}"
|
|
tile
|
|
text
|
|
height="100%"
|
|
>Invited</v-btn>
|
|
<v-btn
|
|
class="d-none d-md-flex"
|
|
v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('registration_possible')"
|
|
:to="{path: '/register'}"
|
|
tile text height="100%"
|
|
>Register</v-btn>
|
|
|
|
<!-- User logged in !-->
|
|
<v-btn
|
|
class="d-none d-md-flex"
|
|
v-if="this.$store.state.loggedIn"
|
|
:to="{path: '/dashboard'}"
|
|
tile
|
|
text
|
|
height="100%"
|
|
>Dashboard</v-btn>
|
|
<v-btn
|
|
class="d-none d-md-flex"
|
|
v-if="this.$store.state.loggedIn && this.$store.getters.getMe.developer"
|
|
:to="{path: '/apps'}"
|
|
tile
|
|
text
|
|
height="100%"
|
|
>Developer</v-btn>
|
|
<v-menu
|
|
|
|
left
|
|
bottom
|
|
offset-y
|
|
v-if="this.$store.state.loggedIn"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn v-on="on" class="d-none d-md-flex" tile text height="100%">
|
|
{{$store.getters.getMe["username"]}}
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item to="/profile">
|
|
<v-list-item-title>Profile</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item to="/access">
|
|
<v-list-item-title>App Access</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title @click="clickLoogut()">Logout</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
|
|
<!-- APP MENU !-->
|
|
<v-menu offset-y v-if="this.$store.state.loggedIn">
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
v-on="on"
|
|
text
|
|
tile
|
|
height="100%"
|
|
>
|
|
<v-icon>apps</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-item-title>KeksAccount</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Mein Verein</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Webmail</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
</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: {
|
|
handleScroll: function (evt, el) {
|
|
let scrollPos = document.documentElement.scrollTop;
|
|
if(scrollPos> 0) {
|
|
this.big = false;
|
|
this.bgcolor = "#fff";
|
|
this.flat = false;
|
|
} else {
|
|
this.big = true;
|
|
this.bgcolor = "rgba(255,255,255,0)";
|
|
this.flat = true;
|
|
}
|
|
},
|
|
clickLoogut: function () {
|
|
UserServie.logout();
|
|
this.$store.dispatch('checkAccount')
|
|
this.$router.push({"path": "login"})
|
|
},
|
|
toggleMenu: function () {
|
|
this.$store.state.sideMenu = !this.$store.state.sideMenu ;
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|