flaschengeist-frontend/src/components/user/UserNavigation.vue

<template>
  <v-list>
    <v-list-item link to="/main/user/add">
      <v-list-item-icon>
        <v-icon>{{ account }}</v-icon>
      </v-list-item-icon>
      <v-list-item-title>
        Home
      </v-list-item-title>
    </v-list-item>
    <v-list-item link :to="{ name: 'userOverview' }">
      <v-list-item-icon>
        <v-icon>{{ bank }}</v-icon>
      </v-list-item-icon>
      <v-list-item-title>Finanzübersicht</v-list-item-title>
    </v-list-item>
    <v-list-item
      link
      :to="{
        name: 'userJobs',
        params: {
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1
        }
      }"
    >
      <v-list-item-icon>
        <v-icon>
          {{ briefcase }}
        </v-icon>
      </v-list-item-icon>
      <v-list-item-title>Dienstübersicht</v-list-item-title>
    </v-list-item>
    <v-list-item
      link
      :to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }"
    >
      <v-list-item-icon>
        <v-badge overlap color="red" :content="news" :value="news !== 0">
          <v-icon>
            {{ switchAccount }}
          </v-icon>
        </v-badge>
      </v-list-item-icon>
      <v-list-item-title>Dienstanfragen</v-list-item-title>
    </v-list-item>
    <v-list-item link :to="{ name: 'userConfig' }">
      <v-list-item-icon>
        <v-icon>{{ account_card_details }}</v-icon>
      </v-list-item-icon>
      <v-list-item-title>Einstellung</v-list-item-title>
    </v-list-item>
  </v-list>
</template>

<script>
import {
  mdiAccountCardDetails,
  mdiHome,
  mdiBank,
  mdiBriefcase,
  mdiAccountSwitch
} from '@mdi/js'

import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'UserNavigation',
  data() {
    return {
      account_card_details: mdiAccountCardDetails,
      account: mdiHome,
      bank: mdiBank,
      briefcase: mdiBriefcase,
      switchAccount: mdiAccountSwitch
    }
  },
  methods: {
    ...mapActions({
      getJobInvites: 'jobInvites/getJobInvites',
      getUser: 'user/getUser'
    })
  },
  computed: {
    ...mapGetters({
      news: 'jobInvites/news'
    })
  },
  created() {
    this.getUser()
    setTimeout(() => {
      this.getJobInvites()
    }, 500)

  }
}
</script>

<style scoped></style>