<template>
  <div class="w-64 bg-base-200 p-4">
    <ul class="menu">
      <li>
        <a
          :class="{ active: currentRoute === 'dashboard' }"
          @click="navigateToDashboard"
        >
          Dashboard
        </a>
      </li>
      <li>
        <a
          :class="{ active: currentRoute === 'profile' }"
          @click="navigateToProfile"
        >
          Profile
        </a>
      </li>
      <li><a>Trading</a></li>
      <li><a>Portfolio</a></li>
      <li><a>Markets</a></li>
      <li>
        <a
          :class="{ active: currentRoute === 'hunting-ground' }"
          @click="navigateToHuntingGround"
        >
          Hunting Ground
        </a>
      </li>
      <li><a>Analytics</a></li>
    </ul>
  </div>
</template>

<script setup lang="ts">
interface Props {
  currentRoute: string;
}

const props = defineProps<Props>();

const { navigateToDashboard, navigateToProfile, navigateToHuntingGround } = useNavigation();
</script>
