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="/main/user/overview">
      <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="/main/user/jobs">
      <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="/main/user/jobRequests">
      <v-list-item-icon>
        <v-icon>
          {{ switchAccount }}
        </v-icon>
      </v-list-item-icon>
      <v-list-item-title>Dienstanfragen</v-list-item-title>
    </v-list-item>
    <v-list-item link to="/main/user/config">
      <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'
export default {
  name: 'UserNavigation',
  data() {
    return {
      account_card_details: mdiAccountCardDetails,
      account: mdiHome,
      bank: mdiBank,
      briefcase: mdiBriefcase,
      switchAccount: mdiAccountSwitch
    }
  }
}
</script>

<style scoped></style>