<template>
    <span class="i-layout-menu-side-title">
        <span class="i-layout-menu-side-title-icon"
            :class="{ 'i-layout-menu-side-title-icon-single': hideTitle }">
            <Icon :type="menu.icon"
                v-if="menu.icon" />
            <Icon :custom="menu.custom"
                v-else-if="menu.custom" />
            <img :src="menu.img"
                v-else-if="menu.img" />
        </span>
        <span class="i-layout-menu-side-title-text"
            :class="{ 'i-layout-menu-side-title-text-selected': selected }"
            v-if="!hideTitle">
            {{ tTitle(menu.title) }}
            <em>{{ tTitle(menu.subTitle) }}</em></span>
    </span>
</template>
<script>
    import tTitle from '../mixins/translate-title';

    export default {
        name: 'iMenuSideTitle',
        mixins: [tTitle],
        props: {
            menu: {
                type: Object,
                default() {
                    return {};
                }
            },
            hideTitle: {
                type: Boolean,
                default: false
            },
            // 用于侧边栏收起 Dropdown 当前高亮
            selected: {
                type: Boolean,
                default: false
            }
        }
    };
</script>
