<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const menuItems = [
 
  { name: "admin-users", label: "用户管理", to: "/admin/users" },
  { name: "admin-card-keys", label: "卡密管理", to: "/admin/card-keys" },
  { name: "admin-desktop-config", label: "桌面配置", to: "/admin/desktop-config" },
  { name: "admin-overview", label: "软件配置", to: "/admin" },
];

const activeName = computed(() => route.name);
</script>

<template>
  <nav class="admin-sub-nav" aria-label="管理后台导航">
    <p class="admin-sub-nav__title"></p>
    <RouterLink
      v-for="item in menuItems"
      :key="item.name"
      :to="item.to"
      class="admin-sub-nav__item"
      :class="{ 'admin-sub-nav__item--active': activeName === item.name }"
    >
      {{ item.label }}
    </RouterLink>
  </nav>
</template>
