flaschengeist-frontend/src/components/finanzer/FinanzerNavigation.vue

<template>
  <div>
    <v-list>
      <v-list-item class="title" link :to="{name: 'overview'}">
        <v-list-item-icon>
          <v-icon>{{home}}</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Gesamtübersicht</v-list-item-title>
      </v-list-item>
    </v-list>
    <v-divider />
    <v-list>
      <div v-for="user in users" v-bind:key="users.indexOf(user)">
        <v-list-item
          :to="{ name: 'activeUser', params: { id: user.username } }"
          link
        >
          <v-list-item-title
            >{{ user.lastname }}, {{ user.firstname }}</v-list-item-title
          >
        </v-list-item>
      </div>
      <v-list-item>
        <v-progress-circular indeterminate color="grey" v-if="loading" />
      </v-list-item>
    </v-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {mdiHome} from '@mdi/js'
export default {
  name: 'FinanzerNavigation',
  data () {
    return {
      home: mdiHome
    }
  },
  computed: {
    ...mapGetters({
      users: 'finanzerUsers/users',
      loading: 'finanzerUsers/usersLoading'
    })
  }
}
</script>

<style scoped></style>