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

<template>
  <SidebarLayout>
    <template #sidebar>
      <SidebarTemplate
        :mainTitle="activeNavigationObject.mainTitle"
        :topTitle="activeNavigationObject.topTitle"
        :showTopList="activeNavigationObject.top != null"
      >
        <template #topList>
          <RoutingLink
            v-for="item in activeNavigationObject.top"
            :key="item.key"
            :title="item.title"
            :link="{ name: `admin-${activeNavigation}-${item.key}` }"
            :active="activeLink == item.key"
          />
        </template>
        <template #list>
          <RoutingLink
            v-for="item in activeNavigationObject.main"
            :key="item.key"
            :title="item.title"
            :link="{ name: `admin-${activeNavigation}-${item.key}` }"
            :active="activeLink == item.key"
          />
        </template>
      </SidebarTemplate>
    </template>
    <template #main>
      <RouterView />
    </template>
  </SidebarLayout>
</template>

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

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useNavigationStore, [
      "activeNavigationObject",
      "activeTopLevelObject",
      "activeLink",
      "activeNavigation",
    ]),
  },
  created() {
    useAbilityStore().$subscribe(() => {
      this.updateTopLevel();
      this.updateNavigation();
    });
    this.updateTopLevel(true);
    this.updateNavigation(true);
  },
  beforeUnmount() {
    this.resetNavigation();
  },
  methods: {
    ...mapActions(useNavigationStore, ["resetNavigation", "updateTopLevel", "updateNavigation"]),
  },
});
</script>