41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
v-if="link"
|
|
class="cursor-pointer w-full flex flex-col md:flex-row items-center md:gap-2 justify-center p-1 md:rounded-full md:px-3 font-medium text-center text-base self-center"
|
|
:class="
|
|
activeNavigation == link.key
|
|
? 'text-primary md:bg-primary md:text-white'
|
|
: 'text-gray-700 hover:text-accent md:hover:bg-accent md:hover:text-white'
|
|
"
|
|
@click="setTopLevel(link.key, disableSubLink)"
|
|
>
|
|
{{ link.title }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mapState, mapActions } from "pinia";
|
|
import { useNavigationStore, type topLevelNavigationModel } from "@/stores/admin/navigation";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, type PropType } from "vue";
|
|
export default defineComponent({
|
|
props: {
|
|
link: {
|
|
type: Object as PropType<topLevelNavigationModel>,
|
|
default: null,
|
|
},
|
|
disableSubLink: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState(useNavigationStore, ["activeNavigation"]),
|
|
},
|
|
methods: {
|
|
...mapActions(useNavigationStore, ["setTopLevel"]),
|
|
},
|
|
});
|
|
</script>
|