<template>
  <ResizablePanel
    position="left"
    :default-size="250"
    :min-size="150"
    :max-size="400"
    v-model:collapsed="isCollapsed"
  >
    <div class="navigation-panel">
      <div class="navigation-header">
        <h2 class="text-xl font-bold">
          <i class="fas fa-cloud mr-2"></i>
          Navigation
        </h2>
      </div>
      
      <nav class="navigation-menu">
        <router-link
          v-for="item in menuItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
          active-class="active"
        >
          <i :class="item.icon" class="mr-3"></i>
          <span>{{ item.label }}</span>
        </router-link>
      </nav>
    </div>
  </ResizablePanel>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ResizablePanel from './ResizablePanel.vue';

const isCollapsed = ref(false);

const menuItems = [
  { path: '/', label: 'Dashboard', icon: 'fas fa-home' },
  { path: '/health', label: 'Health', icon: 'fas fa-heartbeat' },
  { path: '/costs', label: 'Costs', icon: 'fas fa-dollar-sign' },
  { path: '/monitoring', label: 'Monitoring', icon: 'fas fa-chart-line' },
  { path: '/admin', label: 'Admin', icon: 'fas fa-cog' },
];
</script>

<style scoped>
/* Navigation styles moved to panels.css for consistency */
</style>

