<template>
  <el-menu :default-active="activeMenu" 
	:collapse="isCollapse" 
	:unique-opened="true" 
	:collapse-transition="false" 
	style="background-color: #0071aa;"
	class="justify-center"
	 mode="horizontal">
    <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 lang="scss" scoped>
	.el-menu--horizontal{
		border: none;
	}
	.el-menu-item.is-active,
	.el-menu--horizontal>.el-menu-item,
	::v-deep .el-sub-menu .el-sub-menu__title,
	.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
	::v-deep .el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title{
		color: #fff !important;
		background-color: #0071aa !important;
	}
</style>