keksAccountGUI/src/components/Menu2.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%">
                    Admin
                </v-btn>
            </template>

            <v-list>
                <v-list-item to="/admin/settings">
                    <v-list-item-title>Settings</v-list-item-title>
                </v-list-item>
                <v-list-item to="/access">
                    <v-list-item-title>User</v-list-item-title>
                </v-list-item>
                <v-list-item to="/access">
                    <v-list-item-title>Apps</v-list-item-title>
                </v-list-item>
                <v-list-item to="/access">
                    <v-list-item-title>Invites</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
        <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>