<script setup lang="ts">
const { t } = useI18n()

const navItems = computed(() => [
  { to: '/dashboard', icon: 'dashboard', label: t('sidebar.overview') },
  { to: '/browse/discovery', icon: 'explore', label: t('sidebar.browseCourses') },
  { to: '/dashboard/my-courses', icon: 'school', label: t('sidebar.myCourses') }
])

const handleNavigate = (path: string) => {
  if (import.meta.client) {
    window.location.href = path
  }
}
</script>

<template>
  <q-tabs
    indicator-color="primary"
    active-color="primary"
    class="bg-white text-slate-500 shadow-up-1"
    align="justify"
    dense
  >
    <q-tab
      v-for="item in navItems"
      :key="item.to"
      @click="handleNavigate(item.to)"
      :icon="item.icon"
      :label="item.label"
      no-caps
      class="py-2"
      :class="{ 'q-tab--active text-primary': $route.path === item.to }"
    />
  </q-tabs>
</template>

<style scoped>
/* Optional shadow for better separation */
.shadow-up-1 {
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}
</style>
