<template>
  <aside class="context-nav" :class="{ 'is-collapsed': collapsed }">
    <div class="context-nav__head" v-if="!collapsed">
      <span class="context-nav__title">{{ title }}</span>
      <el-button :icon="ArrowLeft" text size="small" @click="$emit('toggle')" />
    </div>
    <div class="context-nav__toggle" v-else @click="$emit('toggle')" title="展开导航">
      <el-icon :size="16"><ArrowRight /></el-icon>
    </div>
    <nav class="context-nav__menu" v-if="!collapsed">
      <router-link
        v-for="item in items"
        :key="item.to"
        :to="item.to"
        class="context-nav__link"
        active-class="is-active"
      >
        <el-icon :size="16" v-if="item.icon"><component :is="item.icon" /></el-icon>
        <span>{{ item.label }}</span>
      </router-link>
    </nav>
  </aside>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

defineProps({
  title: { type: String, default: '' },
  items: { type: Array, default: () => [] },
  collapsed: { type: Boolean, default: false }
})

defineEmits(['toggle'])
</script>

<style scoped>
.context-nav {
  width: var(--shell-context-width, 176px);
  min-height: 100vh;
  background: var(--shell-bg, #1d166b);
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  transition: width var(--motion-fast, 160ms ease);
  overflow: hidden;
}
.context-nav.is-collapsed { width: 40px; }
.context-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.context-nav__title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.context-nav__toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: color var(--motion-fast, 160ms ease);
}
.context-nav__toggle:hover { color: var(--color-accent, #3ad4d8); }
.context-nav__menu { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.context-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-xs, 4px);
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--motion-fast, 160ms ease), background-color var(--motion-fast, 160ms ease);
}
.context-nav__link:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); }
.context-nav__link.is-active { color: var(--color-accent, #3ad4d8); background: rgba(58,212,216,0.08); }
</style>
