keksAccountGUI/src/App.vue

<template>
  <v-app v-scroll="handleScroll" v-if="$store.state.settingsLoaded">
    <v-toolbar 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-for="item in menu"
                :key="item.icon"
                :to="item.link"
                flat
        >{{ item.title }}</v-btn>
      </v-toolbar-items>
      <v-menu class="hidden-md-and-up">
        <v-toolbar-side-icon slot="activator"></v-toolbar-side-icon>
        <v-list>
          <v-list-tile v-for="item in menu" :key="item.icon">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>

    </v-toolbar>


    <v-content style="background-color: #fff;">
      <Startpage/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Startpage from './components/Startpage'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Startpage
  },
  data () {
    return {
      big: true,
      bgcolor: "transparent",
      flat: true,
      nameBig: '',
      nameSmall: '',
      menu: [
        { icon: 'home', title: 'Login' },
        { icon: 'info', title: 'Invited' },
        { icon: 'warning', title: 'Register' }
      ],
      menu2: [
        { icon: 'home', title: 'Apps' },
        { icon: 'info', title: 'Admin' },
        { icon: 'warning', title: 'Account' }
      ]
    }
  },
  computed: {
    setting: (name) => {
      //this.$store.getters.getSettingValue(this.$store.state, name);
    }
  },
  methods: {
    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;
      }
    }
  },
  mounted: function () {

    this.$store.dispatch('getSettings').then(() => {
      this.nameBig = this.$store.getters.getSettingValue("name_big");
      this.nameSmall = this.$store.getters.getSettingValue("name_small");
    });

  }
}
</script>