<!-- Sidebar.vue -->
<template>
    <div class="sidebar">
        <el-menu
            :default-active="0"
            class="el-menu-vertical-demo"
            @select="handleSelect">
            <el-menu-item
                v-for="menu in menuList"
                :index="String(menu.id)"
                :key="menu.id"
                :class="{ 'selected': menu.id == store.currentId }">
                <i class="el-icon-menu"></i>{{ menu.name }}
            </el-menu-item>
        </el-menu>
    </div>
</template>


<script setup>
import { store } from './Store.js';
import { menuList } from './Store.js';

const handleSelect = (key, keyPath) => {
    store.currentId = Number(key);
    console.log("keyPath = " + keyPath)
    // 这里可以根据需要添加逻辑来处理页面切换
};
</script>


<style scoped>
/* 添加这个样式规则来定义选中时的背景颜色 */
.selected {
    background-color: rgb(230, 240, 255); /* 或者你想要的任何颜色 */
    color: black; /* 可选：改变文字颜色以提高可读性 */
}

</style>