시스템 모니터

frontend/components/SidebarNav.vue

@@ -0,0 +1,74 @@
+<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>