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" :link="item" />
        </template>
        <template #list>
          <RoutingLink v-for="item in activeNavigationObject.main" :key="item.key" :link="item" />
        </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 "../RouterView.vue";
</script>

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