42 lines
947 B
Vue
42 lines
947 B
Vue
<script lang="ts">
|
|
import {Options, Vue} from 'vue-class-component';
|
|
import {Prop} from 'vue-property-decorator';
|
|
|
|
@Options({
|
|
name: 'SideBarNavItem',
|
|
components: {},
|
|
})
|
|
export default class SideBarNavItem extends Vue {
|
|
@Prop({required: false})
|
|
faIcon!: string;
|
|
@Prop({required: false})
|
|
text!: string;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<li class="nav-item sidebar-nav-item">
|
|
<slot>
|
|
<div class="d-flex flex-row p-2 align-items-center">
|
|
<i :class="[faIcon]" class="sidebar-nav-item-icon text-center fa"></i>
|
|
<span class="sidebar-nav-item-text me-auto">{{ text }}</span>
|
|
<slot name="end"/>
|
|
</div>
|
|
</slot>
|
|
</li>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.sidebar-nav-item-text {
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
max-width: 10em;
|
|
transition: display ease-in-out 0.25s, opacity ease-in-out 0.25s, max-width ease-in-out 0.25s;
|
|
}
|
|
|
|
.sidebar-nav-item-icon {
|
|
width: 2em;
|
|
text-align: center;
|
|
}
|
|
</style>
|