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

48 lines
1013 B
Vue

<template>
<nuxt-link
class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer rounded-tl-lg rounded-tr-lg"
:class="[colorClasses, index < 5 && 'mr-px', active && 'active']"
:to="tabData.route"
>
<template v-if="!tabData.locked">
<span :class="tabData.label" />
</template>
<template v-if="tabData.locked">
<span class="fas fa-lock" />
</template>
</nuxt-link>
</template>
<script>
export default {
props: {
index: {
type: Number,
required: true,
},
tabData: {
type: Object,
required: true,
},
},
computed: {
active() {
return this.$route.path === this.tabData.route
},
colorClasses() {
const { lightColor, darkColor } = this.tabData
return this.active
? `bg-${lightColor} text-${darkColor}`
: `bg-${darkColor} text-${lightColor}`
},
},
}
</script>
<style scoped>
.active {
box-shadow: 3px 28px 9px -5px #000, 3px -1px 9px -4px #000;
}
</style>