<template>
    <div>
        <div style="height: 60px;display: flex;align-items: center;justify-content: center">
            <span @click="toHome" style="cursor: pointerc;display: flex;flex-direction:row;flex-wrap: nowrap;font-size: 18px;font-weight: bold;color: #42b983;align-items: center">
                <el-avatar :size="40" :src="require('@/assets/logo/logo.png')"></el-avatar>
                <h5 style="margin-left: 10px">{{ isCollapse ? "" : "HelloGithub" }}</h5>
            </span>
        </div>
        <el-menu
            :collapse="isCollapse"
            :collapse-transition="false"
            @close="handleClose"
            @open="handleOpen"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#FBFBFB"
            width="200px"
            :default-active="$route.path"
            router
            index="1"
        >

        <el-menu-item   index="/adminHome"><i class="el-icon-s-home"></i><span v-show="!isCollapse">首页</span></el-menu-item>
        <el-menu-item index="/systemManage"><i class="el-icon-s-tools"></i><span v-show="!isCollapse">管理员</span></el-menu-item>
        <el-menu-item index="/userManage"><i class="el-icon-user-solid"></i><span v-show="!isCollapse">用户管理</span></el-menu-item>
        <el-menu-item index="/projectManage"><i class="el-icon-s-help"></i><span v-show="!isCollapse">项目管理</span></el-menu-item>
        <el-menu-item index="/articleManage"><i class="el-icon-s-management"></i><span v-show="!isCollapse">文章管理</span></el-menu-item>
        <el-menu-item index="/categoryManage"><i class="el-icon-s-flag"></i><span v-show="!isCollapse">标签管理</span></el-menu-item>
        <el-menu-item index="/commentManage"><i class="el-icon-s-comment"></i><span v-show="!isCollapse">评论管理</span></el-menu-item>

        </el-menu>
    </div>

</template>

<script>

export default {
    name: "AdminAside",
    data() {
        return {
            systemName:'HelloGithub后台管理'
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        toHome(){
            this.$router.push({
                path:'/home'
            })
        }

    },
    computed:{
        isCollapse() {
            return this.$store.state.isCollapse;
        },
    },


}
</script>

<style scoped>
/deep/ .el-submenu__title {
    width: 200px;
}

/deep/ .el-menu-item-group__title {
    width: 200px;
}

</style>