<template>
  <aside class="w-64 bg-gray-900 text-white min-h-screen hidden md:block">
    <div class="p-6">
      <h2 class="text-2xl font-bold tracking-wider">Menu</h2>
    </div>
    <nav class="mt-6">
      <template v-if="authStore.isWorker">
        <router-link :to="{ name: 'worker.dashboard' }" class="block px-6 py-3 hover:bg-gray-800 transition-colors" active-class="bg-gray-800 border-l-4 border-indigo-500">
          Dashboard
        </router-link>
        <!-- Add more worker links here later -->
      </template>

      <template v-if="authStore.isClient">
        <router-link :to="{ name: 'client.dashboard' }" class="block px-6 py-3 hover:bg-gray-800 transition-colors" active-class="bg-gray-800 border-l-4 border-green-500">
          Dashboard
        </router-link>
         <!-- Add more client links here later -->
      </template>

      <template v-if="authStore.isAdmin">
        <router-link :to="{ name: 'admin.dashboard' }" class="block px-6 py-3 hover:bg-gray-800 transition-colors" active-class="bg-gray-800 border-l-4 border-red-500">
          Dashboard
        </router-link>
        <router-link :to="{ name: 'admin.settings' }" class="block px-6 py-3 hover:bg-gray-800 transition-colors" active-class="bg-gray-800 border-l-4 border-red-500">
          Settings
        </router-link>
      </template>
    </nav>
  </aside>
</template>

<script setup>
import { useAuthStore } from '../stores/auth';
const authStore = useAuthStore();
</script>
