<template>
  <!-- Desktop Sidebar -->
  <aside class="hidden lg:block w-64 bg-white shadow-lg border-r border-gray-200 h-[calc(100vh-4rem)] sticky top-16">
    <div class="p-6">
      <!-- Navigation Menu -->
      <nav class="space-y-2">
        <NuxtLink
          :to="localePath('/dashboard')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.auction') || 'Аукцион' }}</span>
        </NuxtLink>

        <NuxtLink
          :to="localePath('/dashboard/catalog')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.catalog') || 'Каталог' }}</span>
        </NuxtLink>

        <NuxtLink
          :to="localePath('/dashboard/orders')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.orders') || 'Мои заказы' }}</span>
        </NuxtLink>

        <NuxtLink 
          :to="localePath('/dashboard/profile')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.profile') }}</span>
        </NuxtLink>

        <NuxtLink 
          :to="localePath('/dashboard/team')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.team') }}</span>
        </NuxtLink>
      </nav>
    </div>
  </aside>

  <!-- Mobile Sidebar -->
  <aside 
    :class="[
      'lg:hidden fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg border-r border-gray-200 transform transition-transform duration-300 ease-in-out',
      isOpen ? 'translate-x-0' : '-translate-x-full'
    ]"
  >
    <div class="flex items-center justify-between p-4 border-b border-gray-200">
      <h2 class="text-lg font-semibold text-gray-900">Меню</h2>
      <button 
        @click="$emit('close')"
        class="p-2 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    
    <div class="p-6">
      <!-- Navigation Menu -->
      <nav class="space-y-2">
        <NuxtLink
          :to="localePath('/dashboard')"
          @click="$emit('close')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.auction') || 'Аукцион' }}</span>
        </NuxtLink>

        <NuxtLink
          :to="localePath('/dashboard/catalog')"
          @click="$emit('close')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.catalog') || 'Каталог' }}</span>
        </NuxtLink>

        <NuxtLink
          :to="localePath('/dashboard/orders')"
          @click="$emit('close')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.orders') || 'Мои заказы' }}</span>
        </NuxtLink>

        <NuxtLink
          :to="localePath('/dashboard/profile')"
          @click="$emit('close')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.profile') }}</span>
        </NuxtLink>

        <NuxtLink
          :to="localePath('/dashboard/team')"
          @click="$emit('close')"
          class="flex items-center space-x-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
          active-class="bg-blue-50 text-blue-700 border-r-2 border-blue-600"
        >
          <span>{{ $t('dashboard.team') }}</span>
        </NuxtLink>
      </nav>
    </div>
  </aside>
</template>

<script setup>
defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})

defineEmits(['close'])

const localePath = useLocalePath()
</script>