3fa236cff5
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 41s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
38 lines
798 B
Vue
38 lines
798 B
Vue
<script setup lang="ts">
|
|
const { mobileItems } = useNavItems()
|
|
const navItems = mobileItems
|
|
|
|
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="$t(item.labelKey)"
|
|
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>
|