<template>
  <div class="headerMenu">
    <!-- <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> -->
    <el-menu class="el-menu-demo" mode="horizontal">
      <sidebar-item
        v-for="(route, index) in sidebarRouters"
        :key="route.path + index"
        :item="route"
        :base-path="route.path"
      />
    </el-menu>
    <!-- </el-scrollbar> -->
  </div>
</template>

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

export default {
  name: "headerMenu",
  components: { SidebarItem },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
};
</script>
<style lang="scss" scoped>
.headerMenu {
  width: 100%;
  height: 56px;

  .el-menu {
    background-color: #2a3350;
    width: 100%;
    height: 56px;
    overflow-x: scroll;
    overflow-y: hidden;
    display: -webkit-box;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background-color: #2a3350;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      background-color: #3a60ac;
      transition: 0.3s ease-in-out;
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #2a3350;
    }

    ::v-deep .el-menu-item,
    ::v-deep .el-submenu__title {
      color: #fff !important;
    }
    ::v-deep .el-submenu__icon-arrow {
      right: 4px;
      top: 54%;
      color: #fff;
    }
    ::v-deep .el-menu-item:hover,
    ::v-deep .el-menu-item:focus {
      outline: none;
      color: #3a60ac;
    }
  }
}
</style>