elearning/Frontend-Learner/components/common/MobileNav.vue
2026-01-13 10:48:02 +07:00

29 lines
773 B
Vue

<script setup lang="ts">
const route = useRoute()
const navItems = [
{ to: '/dashboard', icon: '🏠', label: 'หน้าหลัก' },
{ to: '/browse/discovery', icon: '🔍', label: 'รายการคอร์ส' },
{ to: '/dashboard/my-courses', icon: '📚', label: 'คอร์สของฉัน' }
]
const isActive = (path: string) => {
if (path === '/') return route.path === '/'
return route.path.startsWith(path)
}
</script>
<template>
<nav class="mobile-nav">
<NuxtLink
v-for="item in navItems"
:key="item.to"
:to="item.to"
class="mobile-nav-item"
:class="{ active: isActive(item.to) }"
>
<span>{{ item.icon }}</span>
<span>{{ item.label }}</span>
</NuxtLink>
</nav>
</template>