<template>
  <aside class="sidebar">
    <div class="sidebar-header">
      <div class="sidebar-logo">
        <span class="logo-icon">📡</span>
        <span>OSOLIT Monitor</span>
      </div>
    </div>
    
    <nav class="sidebar-nav">
      <NuxtLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
        <span class="icon">📊</span>
        <span>대시보드</span>
      </NuxtLink>
      
      <div class="nav-group-title">네트워크</div>
      
      <NuxtLink to="/network/pubnet" class="nav-item nav-sub-item" :class="{ active: route.path === '/network/pubnet' }">
        <span class="icon">🌐</span>
        <span>Public Network</span>
      </NuxtLink>
      
      <NuxtLink to="/network/privnet" class="nav-item nav-sub-item" :class="{ active: route.path === '/network/privnet' }">
        <span class="icon">🔒</span>
        <span>Private Network</span>
      </NuxtLink>
      
      <div class="nav-group-title">서버</div>
      
      <NuxtLink to="/server/list" class="nav-item nav-sub-item" :class="{ active: route.path === '/server/list' }">
        <span class="icon">🖥️</span>
        <span>Server Targets</span>
      </NuxtLink>
      
      <NuxtLink to="/server/history" class="nav-item nav-sub-item" :class="{ active: route.path === '/server/history' }">
        <span class="icon">📈</span>
        <span>Server Status</span>
      </NuxtLink>
      
      <div class="nav-group-title">이상감지</div>
      
      <NuxtLink to="/anomaly/short-term" class="nav-item nav-sub-item" :class="{ active: route.path === '/anomaly/short-term' }">
        <span class="icon">⚡</span>
        <span>단기 변화율</span>
      </NuxtLink>
      
      <NuxtLink to="/anomaly/zscore" class="nav-item nav-sub-item" :class="{ active: route.path === '/anomaly/zscore' }">
        <span class="icon">📊</span>
        <span>Z-Score 분석</span>
      </NuxtLink>
      
      <NuxtLink to="/anomaly/baseline" class="nav-item nav-sub-item" :class="{ active: route.path === '/anomaly/baseline' }">
        <span class="icon">🕐</span>
        <span>시간대별 베이스라인</span>
      </NuxtLink>
      
      <NuxtLink to="/anomaly/trend" class="nav-item nav-sub-item" :class="{ active: route.path === '/anomaly/trend' }">
        <span class="icon">📉</span>
        <span>추세 분석</span>
      </NuxtLink>
      
      <div class="nav-group-title">설정</div>
      
      <NuxtLink to="/settings/thresholds" class="nav-item nav-sub-item" :class="{ active: route.path === '/settings/thresholds' }">
        <span class="icon">⚙️</span>
        <span>임계값 설정</span>
      </NuxtLink>
    </nav>
  </aside>
</template>

<script setup lang="ts">
const route = useRoute()
</script>
