<template>
    <div>
        <div style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center">
            <span style="font-size: 18px;font-weight: bold;color: #42b983;">
                {{systemName}}
            </span>
        </div>
        <el-menu
            :collapse="isCollapse"
            @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
        >

        <el-menu-item   index="/adminHome"><i class="el-icon-s-home"></i>首页</el-menu-item>
        <el-menu-item index="/systemManage"><i class="el-icon-s-tools"></i>系统管理</el-menu-item>
        <el-menu-item index="/userManage"><i class="el-icon-user-solid"></i>用户管理</el-menu-item>
        <el-menu-item index="/projectManage"><i class="el-icon-s-help"></i>项目管理</el-menu-item>
        <el-menu-item index="/articleManage"><i class="el-icon-s-management"></i>文章管理</el-menu-item>
        <el-menu-item index="/categoryManage"><i class="el-icon-s-flag"></i>标签管理</el-menu-item>
        <el-menu-item index="/commentManage"><i class="el-icon-s-comment"></i>评论管理</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);
        },

    },
    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>