<template>
    <li class="nav-item">
        <a class="nav-link WM-Flex" :class="[aClass, (Status == 'Active' ? 'active' : '')]" data-toggle="tab" :href="TabHref">
            <div class="WM-Notification" v-if="Quantity>0"> {{ Quantity }} </div>
            <div>
                <div class="WM-Font-18"> {{ TitleFa }} </div> {{ TitleEn }}
            </div>
        </a>

    </li>
</template>

<script>
export default {
    props: {
        TitleFa:   { default: "دسترسی سریع" },
        TitleEn:   { default: "Title" },
        Color:     { default: "Black" },
        TabContent:   { default: '' },
        Status:   { default: '' },
        Quantity:   { default: 0 },
    },
    data: function ()  {
        return {
            aClass: 'WM-' + this.Color,
            TabHref: '#' + this.TabContent,
        }
    },
};

</script>
