<template>
  <aside class="sidebar">
    <div class="sidebar-top">
      <div class="profile-icon">
        <!-- 用户头像占位 -->
      </div>
    </div>
    <nav class="sidebar-nav">
      <a href="#" class="nav-item active">
        <!-- 图标：主页 -->
        <span>主页</span>
      </a>
      <a href="#" class="nav-item">
        <!-- 图标：编程 -->
        <span>编程</span>
      </a>
      <a href="#" class="nav-item">
        <!-- 图标：设计 -->
        <span>设计</span>
      </a>
      <a href="#" class="nav-item">
        <!-- 图标：产品 -->
        <span>产品</span>
      </a>
      <a href="#" class="nav-item">
        <!-- 图标：AI -->
        <span>AI</span>
      </a>
      <a href="#" class="nav-item">
        <!-- 图标：摸鱼 -->
        <span>摸鱼</span>
      </a>
      <a href="#" class="nav-item add-item">
        <!-- 图标：新增 -->
      </a>
    </nav>
    <div class="sidebar-bottom">
      <a href="#" class="nav-item">
        <!-- 图标：设置 -->
      </a>
    </div>
  </aside>
</template>

<script setup lang="ts">
// 该组件暂时不需要脚本逻辑。
</script>

<style lang="scss" scoped>

@import '@/styles/tokens.scss';

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sidebar-padding-y) 0;
  background-color: rgba(10, 10, 10, 0.5); // 半透明黑色
  backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  position: fixed;
  left: 0;
  top: 0;
  z-index: $z-index-sidebar;
}

.profile-icon {
  width: var(--sidebar-profile-size);
  height: var(--sidebar-profile-size);
  border-radius: 50%;
  background-color: $color-accent;
  margin-bottom: var(--sidebar-profile-margin-bottom);
  // 可放置“登录”文本或真实头像
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sidebar-nav-gap);
  width: 100%;
}

.nav-item {
  width: var(--sidebar-nav-item-size);
  height: var(--sidebar-nav-item-size);
  border-radius: $border-radius-medium;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: $color-text-secondary;
  transition: background-color $motion-duration-sm $motion-easing-standard;
  position: relative;

  span {
    font-size: 12px;
    margin-top: 4px; // 预留图标间距
  }
  
  &.active, &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: $color-text-primary;
  }

  &.active::before {
    content: '';
    position: absolute;
    left: var(--sidebar-active-indicator-offset);
    top: 50%;
    transform: translateY(-50%);
    width: var(--sidebar-active-indicator-width);
    height: var(--sidebar-active-indicator-height);
    background-color: $color-accent;
    border-radius: 2px;
  }
}

.add-item {
  margin-top: var(--sidebar-add-margin-top);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
   &:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
  }
}

.sidebar-bottom {
  margin-top: auto;
}
</style>
