This repository has been archived on 2024-03-13. You can view files and clone it, but cannot push or open issues or pull requests.
timekeeper/components/GameTab.vue

38 lines
827 B
Vue
Raw Normal View History

2022-01-07 01:17:26 +00:00
<template>
2022-01-10 03:28:09 +00:00
<nuxt-link
2022-01-10 10:13:40 +00:00
class="text-center text-2xl py-1 cursor-pointer rounded-t-lg"
:class="[colorClasses, { active }]"
2022-01-10 03:28:09 +00:00
:to="tabData.route"
2022-01-14 07:00:50 +00:00
:event="!tabData.unlocked ? '' : 'click'"
2022-01-07 01:17:26 +00:00
>
<span v-if="tabData.unlocked" :class="tabData.label" />
2022-01-10 10:13:40 +00:00
<span v-else class="fas fa-lock" />
2022-01-10 03:28:09 +00:00
</nuxt-link>
2022-01-07 01:17:26 +00:00
</template>
<script>
export default {
props: {
2022-01-10 10:13:40 +00:00
tabData: { type: Object, required: true },
2022-01-07 01:17:26 +00:00
},
computed: {
active() {
2022-01-10 03:28:09 +00:00
return this.$route.path === this.tabData.route
2022-01-07 01:17:26 +00:00
},
colorClasses() {
2022-01-10 03:28:09 +00:00
const { lightColor, darkColor } = this.tabData
2022-01-07 01:17:26 +00:00
return this.active
2022-01-10 03:28:09 +00:00
? `bg-${lightColor} text-${darkColor}`
: `bg-${darkColor} text-${lightColor}`
2022-01-07 01:17:26 +00:00
},
},
}
</script>
<style scoped>
.active {
box-shadow: 3px 28px 9px -5px #000, 3px -1px 9px -4px #000;
}
</style>