<template>
<aside class="w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col z-20 h-full">
    <div class="p-8 flex items-center gap-3">
      <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
        <span class="text-white font-bold text-xl">TK
        </span>
      </div>
      <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">Yolo <span class="text-primary">助手</span>
      </h1>
    </div>
    
    <nav class="flex-1 px-4 space-y-2">
      <a 
        class="flex items-center gap-3 px-4 py-3 rounded-lg font-medium cursor-pointer transition-colors"
        :class="activeIndex == 1 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'"
        @click="updateActiveIndex(1)"
      >
        <span class="material-icons-round">grid_view</span>
        {{ $t('menu.workbenches') }}
      </a>
      
      <a 
        class="flex items-center gap-3 px-4 py-3 rounded-lg font-medium cursor-pointer transition-colors"
        :class="activeIndex == 2 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'"
        @click="updateActiveIndex(2)"
      >
        <span class="material-icons-round">person_search</span>
        {{ $t('menu.hostList') }}
      </a>
    </nav>
    
    <div class="p-6 border-t border-slate-100 dark:border-slate-800">
      <button 
        class="flex items-center gap-3 text-slate-500 hover:text-red-500 transition-colors w-full px-4 py-2"
        @click="$router.push('/')"
      >
        <span class="material-icons-round text-lg">logout</span>
        <span class="font-medium">{{ $t('menu.logout') }}</span>
      </button>
    </div>
  </aside>
</template>

<script setup>
import { ref } from 'vue';
import { getUser } from '@/utils/storage'
import { defineEmits } from 'vue';

const userInfo = ref(getUser())

let activeIndex = ref(1);

const emit = defineEmits(['activeIndex']);

const updateActiveIndex = (index) => {
  activeIndex.value = index;
  emit('activeIndex', index);
};
</script>

<style scoped>
/* Scoped styles are minimal now as we use Tailwind */
</style>