<!-- 管理后台左侧菜单组件，统一维护菜单入口、图标和展示顺序。 -->
<script setup lang="ts">
import AppIcon from "@/components/AppIcon.vue";
import { adminMenuItems } from "@/router/adminNavigation";

defineProps<{ activePath: string; collapsed?: boolean }>();
const emit = defineEmits<{ navigate: [path: string] }>();
</script>

<template>
  <nav
    class="menu admin-menu"
    :class="{ 'admin-menu--collapsed': collapsed }"
  >
    <button
      v-for="item in adminMenuItems"
      :key="item.path"
      class="menu-item"
      :class="{ active: activePath === item.path }"
      type="button"
      :title="collapsed ? item.label : undefined"
      @click="emit('navigate', item.path)"
    >
      <AppIcon
        :name="item.icon"
        :size="20"
      />
      <span v-if="!collapsed">{{ item.label }}</span>
    </button>
  </nav>
</template>

<style scoped>
.admin-menu {
  gap: 5px;
  padding: 12px 1px 8px;
}
.admin-menu--collapsed {
  padding-inline: 0;
}
</style>
