Files
MoviePilot-Frontend/src/@layouts/components/VerticalNavLink.vue
2024-06-13 17:30:50 +08:00

43 lines
782 B
Vue

<script lang="ts" setup>
import type { NavLink } from '@layouts/types'
defineProps<{
item: NavLink
}>()
</script>
<template>
<li
class="nav-link"
:class="{ disabled: item.disable }"
>
<Component
:is="item.to ? 'RouterLink' : 'a'"
:to="item.to"
:href="item.href"
>
<VIcon
:icon="item.icon"
class="nav-item-icon"
/>
<!-- 👉 Title -->
<span class="nav-item-title">
{{ item.title }}
</span>
</Component>
</li>
</template>
<style lang="scss">
.layout-vertical-nav {
.nav-link a {
display: flex;
align-items: center;
border-radius: 0 3.125rem 3.125rem 0 !important;
cursor: pointer;
margin-inline-end: 1.125em;
padding-inline: 1.375rem 1rem;
}
}
</style>