<template>
  <el-menu :default-active="activeMenu" 
	:collapse="isCollapse" 
	:unique-opened="true" 
	:active-text-color="theme" 
	:collapse-transition="false" 
	text-color="#fff"
	mode="vertical">
	<!-- style="background-color: #59C9AB;" -->
    <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
  </el-menu>
</template>

<script setup>
import SidebarItem from "./SidebarItem";
const { proxy } = getCurrentInstance();
const sidebarRouters = computed(() => proxy.$store.getters.sidebarRouters);
const sideTheme = computed(() => proxy.$store.state.settings.sideTheme);
// const theme = computed(() => proxy.$store.state.settings.theme);
const theme = "#fff";
const isCollapse = computed(() => !proxy.$store.state.app.sidebar.opened);

const activeMenu = computed(() => {
  const { meta, path } = proxy.$route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
</script>

<style>
</style>