ff-admin/src/views/account/View.vue

<template>
  <SidebarLayout>
    <template #sidebar>
      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="isOwner">
        <template v-if="isOwner" #topList>
          <RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
        </template>
        <template #list>
          <RoutingLink title="Mein Account" :link="{ name: 'account-me' }" :active="activeRouteName == 'account-me'" />
          <RoutingLink
            title="Anmeldedaten"
            :link="{ name: 'account-logindata' }"
            :active="activeRouteName == 'account-logindata'"
          />
          <RoutingLink
            title="Meine Berechtigungen"
            :link="{ name: 'account-permission' }"
            :active="activeRouteName == 'account-permission'"
          />
        </template>
      </SidebarTemplate>
    </template>
    <template #main>
      <RouterView />
    </template>
  </SidebarLayout>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import SidebarLayout from "@/layouts/Sidebar.vue";
import SidebarTemplate from "@/templates/Sidebar.vue";
import RoutingLink from "@/components/admin/RoutingLink.vue";
import { RouterView } from "vue-router";
import { useAbilityStore } from "@/stores/ability";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useAbilityStore, ["isOwner"]),
    activeRouteName() {
      return this.$route.name;
    },
  },
});
</script>