<template>
<div class="xp-logo">
    <a href="http://xpage.baidu-int.com/" class="xp-logo-link">
        <img src="./logo.svg" alt="XPage" width="36" height="36" class="xp-logo-pic">
        <span v-if="isShowLabel" class="xp-logo-text">XPage</span>
    </a>
</div>
</template>

<script>

export default {
    name: 'x-aside',
    props: {
        isShowLabel: {
            'default': true
        }
    },
    events: {
        onCollapse(evt) {
            if (!evt) {
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.isShowLabel = !evt;
                    }, 200);
                });
            }
            else {
                this.isShowLabel = !evt;
            }
        }
    }
};
</script>
<style lang="less">
.xp-logo {
    &-link {
        display: flex;
        align-items: center;
    }
    &-text {
        margin-left: 10px;
        font-size: 28px;
        color: #fff;
    }

    &-pic {
        display: inline-block;

        span {
            padding-left: 10px;
            border-left: solid 1px #eee;
            font-size: 20px;
        }
    }
}

</style>
