elearning/Frontend-Learner/components/common/MobileNav.vue

34 lines
813 B
Vue

<script setup lang="ts">
const navItems = [
{ to: '/dashboard', icon: 'dashboard', label: 'หน้าหลัก' },
{ to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
{ to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
]
</script>
<template>
<q-tabs
indicator-color="primary"
active-color="primary"
class="bg-white text-slate-500 shadow-up-1"
align="justify"
dense
>
<q-route-tab
v-for="item in navItems"
:key="item.to"
:to="item.to"
:icon="item.icon"
:label="item.label"
no-caps
class="py-2"
/>
</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>