<template>
  <aside
    class="sidebar"
    :class="{ collapsed }"
    role="navigation"
    :aria-label="collapsed ? '收起的导航菜单' : '导航菜单'"
  >
    <SidebarHeader 
      :collapsed="collapsed" 
      @toggle="$emit('update:collapsed', !collapsed)" 
    />
    
    <SidebarNav 
      :items="navItems" 
      :active-key="activeKey"
      :collapsed="collapsed"
      @select="handleNavigate"
    />
    
    <div class="sidebar-spacer"></div>
    
    <SidebarUser 
      :collapsed="collapsed"
      :user-info="userInfo"
      :role-label="roleLabel"
      @logout="$emit('logout')"
      @settings="$emit('settings')"
    />
  </aside>
</template>

<script setup>
import SidebarHeader from './SidebarHeader.vue'
import SidebarNav from './SidebarNav.vue'
import SidebarUser from './SidebarUser.vue'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  },
  navItems: {
    type: Array,
    required: true
  },
  activeKey: {
    type: String,
    required: true
  },
  userInfo: {
    type: Object,
    default: () => ({})
  },
  roleLabel: {
    type: String,
    default: ''
  }
})

const emit = defineEmits([
  'update:collapsed',
  'navigate',
  'logout',
  'settings'
])

function handleNavigate(key) {
  emit('navigate', key)
}
</script>

<style scoped>
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-sidebar);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--sidebar-transition-duration) var(--sidebar-transition-easing);
  flex-shrink: 0;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-spacer {
  flex: 1;
  min-height: 0;
}
</style>
