<template>
  <div class="Menu-wrapper">
    <el-menu
      :default-active="activeMenu"
      :text-color="'black'"
      :unique-opened="true"
      :active-text-color="settings.theme"
      :collapse-transition="false"
      mode="horizontal"
    >
      <menu-item
        v-for="(route, index) in sidebarRouters"
        :key="route.path + index"
        :item="route"
        :base-path="route.path"
      ></menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import MenuItem from "./MenuItem/Index.vue";

export default {
  name: "SidebarItem",
  components: { MenuItem },
  data() {
    return {};
  },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
  },
  mounted() {
    console.log(this.sidebarRouters, "sidebarRouters");
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.Menu-wrapper {
  width: 100%;
  height: 50px;
  background-color: #fff;

  .el-menu {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
