46 lines
938 B
Vue
46 lines
938 B
Vue
<script setup lang="tsx">
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const handleRoute = (path: string): void => {
|
|
router.push(path)
|
|
}
|
|
|
|
const isCurrentRoute = (path: string): boolean => {
|
|
return path === route.path
|
|
}
|
|
</script>
|
|
<template>
|
|
<v-app-bar color="primary" density="compact">
|
|
<v-app-bar-title>{{ $route.meta.title }}</v-app-bar-title>
|
|
<template #append>
|
|
<v-btn
|
|
prepend-icon="mdi-home"
|
|
variant="text"
|
|
:class="{ active: isCurrentRoute('/') }"
|
|
@click="handleRoute('/')"
|
|
>
|
|
{{ $t('title.main') }}
|
|
</v-btn>
|
|
<v-btn
|
|
prepend-icon="mdi-fit-to-screen-outline"
|
|
variant="text"
|
|
:class="{ active: isCurrentRoute('/second') }"
|
|
@click="handleRoute('/second')"
|
|
>
|
|
{{ $t('title.second') }}
|
|
</v-btn>
|
|
</template>
|
|
</v-app-bar>
|
|
</template>
|
|
<style scoped>
|
|
.v-btn {
|
|
opacity: 0.4;
|
|
}
|
|
.active {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|