<template>
  <div class="sidebar">
    <div class="logo-section">
      <img src="@/assets/logo.jpg" alt="logo" class="logo-image">
    </div>
    <nav class="nav-menu">
      <router-link 
        v-for="item in navItems" 
        :key="item.path"
        :to="item.path"
        class="nav-item"
        :class="{ active: $route.path === item.path }"
      >
        <span class="nav-icon">{{ item.icon }}</span>
        <span class="nav-text">{{ item.text }}</span>
      </router-link>
    </nav>
  </div>
</template>

<script setup>
const navItems = [
  { path: '/chat', icon: '🤖', text: 'AI助手' },
  { path: '/hazard', icon: '🔍', text: '隐患检测' },
  { path: '/exam', icon: '📝', text: '模拟考试' },
  { path: '/knowledge', icon: '📚', text: '知识库' }
]
</script>

<style scoped lang="scss">
.sidebar {
  width: 220px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.logo-section {
  padding: 0 16px 24px;
  text-align: center;

  .logo-image {
    width: 120px;
    height: auto;
  }
}

.nav-menu {
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  margin: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: #666;
  transition: all 0.2s;

  &:hover {
    background: #f0f5ff;
    color: #1890ff;
  }

  &.active {
    background: #1890ff;
    color: #fff;
  }

  .nav-icon {
    font-size: 18px;
    margin-right: 10px;
  }

  .nav-text {
    font-size: 14px;
  }
}
</style>
