keksAccountGUI/src/components/Menu.vue

<template>
    <v-toolbar v-scroll="handleScroll" height="55" style="z-index:10;" fixed  :flat="flat"  :prominent="big" :dense="!big" :color="bgcolor" >
        <v-toolbar-title class="headline text-uppercase"  @click="$router.push({'name': 'Dashboard'})">
            <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"
                    :to="{path: '/dashboard'}"
                    text
            >Dashboard</v-btn>
            <v-btn
                    v-if="this.$store.state.loggedIn && this.$store.getters.getMe.developer"
                    :to="{path: '/apps'}"
                    text
            >Developer</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"
                            text
                    >
                        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"
                            text
                    >
                        {{$store.getters.getMe["username"]}}
                    </v-btn>
                </template>
                <v-list>
                    <v-list-tile @click="$router.push({'name': 'userMails'})">
                        <v-list-tile-title >Contact Information</v-list-tile-title>
                    </v-list-tile>
                    <v-list-tile @click="$router.push({'name': 'userMails'})">
                        <v-list-tile-title >Profil</v-list-tile-title>
                    </v-list-tile>
                    <v-list-tile @click="clickLoogut()">
                        <v-list-tile-title >Logout</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"
                            text
                    >
                        <v-btn icon>
                            <v-icon>apps</v-icon>
                        </v-btn>
                    </v-btn>
                </template>
                <v-list>
                    <v-list-tile @click="">
                        <v-list-tile-title >KeksAccount</v-list-tile-title>
                    </v-list-tile>
                    <v-list-tile @click="">
                        <v-list-tile-title >Mein Verein</v-list-tile-title>
                    </v-list-tile>
                    <v-list-tile @click="">
                        <v-list-tile-title >Webmail</v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>

            <v-btn
                    v-if="!this.$store.state.loggedIn"
                    :to="{path: '/login'}"
                    text
            >Login</v-btn>

            <v-btn
                    v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('invites')"
                    :to="{path: '/invited'}"
                    text
            >Invited</v-btn>
            <v-btn
                    v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('registration_possible')"
            :to="{path: '/register'}"
            text
            >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) {
                console.log("SCROLL: "+evt.pageY);
                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>