<template>
  <aside class="sidebar" :class="{ 'is-collapsed': collapsed }">
    <div class="logo">
      <span class="logo-icon">📡</span>
      <span v-show="!collapsed" class="logo-text">信令管理后台</span>
    </div>
    <el-menu
      router
      :default-active="activeMenu"
      :collapse="collapsed"
      :collapse-transition="false"
      background-color="#1b1f2d"
      text-color="#cbd5e1"
      active-text-color="#ffffff"
      class="menu"
    >
      <el-menu-item v-for="m in menus" :key="m.path" :index="m.path">
        <el-icon><component :is="m.icon" /></el-icon>
        <template #title>{{ m.title }}</template>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

defineProps<{ collapsed: boolean }>();

const route = useRoute();
const activeMenu = computed(() => route.path);

const menus = [
  { path: '/dashboard', title: '仪表盘', icon: 'Odometer' },
  { path: '/devices', title: '设备管理', icon: 'Monitor' },
  { path: '/connections', title: '连接请求', icon: 'Connection' },
  { path: '/system/info', title: '服务器信息', icon: 'Cpu' },
  { path: '/system/config', title: '系统配置', icon: 'Setting' },
];
</script>

<style scoped>
.sidebar {
  width: 220px;
  background: var(--admin-sidebar-bg);
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
  flex-shrink: 0;
}
.sidebar.is-collapsed {
  width: 64px;
}
.logo {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
.logo-icon {
  font-size: 22px;
}
.menu {
  border-right: none;
  flex: 1;
  width: 100%;
}
:deep(.el-menu-item.is-active) {
  background: var(--admin-sidebar-active) !important;
}
:deep(.el-menu-item:hover) {
  background: #2a3142 !important;
}
</style>
