75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<script setup>
|
|
import { NuxtLink } from '#components'
|
|
|
|
|
|
import { layoutConfig } from '@layouts'
|
|
import { can } from '@layouts/plugins/casl'
|
|
import {
|
|
getComputedNavLinkToProp,
|
|
getDynamicI18nProps,
|
|
isNavLinkActive,
|
|
} from '@layouts/utils'
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: null,
|
|
required: true,
|
|
},
|
|
isSubItem: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<li
|
|
v-if="can(item.action, item.subject)"
|
|
class="nav-link"
|
|
:class="[
|
|
{
|
|
'sub-item': props.isSubItem,
|
|
'disabled': item.disable,
|
|
},
|
|
]"
|
|
>
|
|
<Component
|
|
:is="item.to ? NuxtLink : 'a'"
|
|
v-bind="getComputedNavLinkToProp(item)"
|
|
:class="{
|
|
'router-link-active router-link-exact-active': isNavLinkActive(
|
|
item,
|
|
$router,
|
|
),
|
|
}"
|
|
>
|
|
<Component
|
|
:is="layoutConfig.app.iconRenderer || 'div'"
|
|
class="nav-item-icon"
|
|
v-bind="
|
|
item.icon && typeof item.icon === 'object' && item.icon !== null
|
|
? item.icon
|
|
: layoutConfig.verticalNav.defaultNavItemIconProps || {}
|
|
"
|
|
/>
|
|
<Component
|
|
:is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
|
|
class="nav-item-title"
|
|
v-bind="getDynamicI18nProps(item.title, 'span')"
|
|
>
|
|
{{ item.title }}
|
|
</Component>
|
|
</Component>
|
|
</li>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.layout-horizontal-nav {
|
|
.nav-link a {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|