<template>
  <div
    :class="{ 'has-logo': showLogo }"
    :style="{
      backgroundColor:
        settings.sideTheme === 'theme-dark'
          ? variables.menuBg
          : variables.menuLightBg,
    }"
  >
    <logo v-if="showLogo" :collapse="isCollapse" />
    <!-- <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> -->
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      :background-color="
        settings.sideTheme === 'theme-dark'
          ? variables.menuBg
          : variables.menuLightBg
      "
      :text-color="
        settings.sideTheme === 'theme-dark' ? variables.menuText : '#333333'
      "
      :unique-opened="true"
      active-text-color="#4d148c"
      :collapse-transition="false"
      mode="vertical"
    >
      <sidebar-item
        v-for="(route, index) in sidebarRouters"
        :key="route.path + index"
        :item="route"
        :base-path="route.path"
      />
    </el-menu>
    <!-- </el-scrollbar> -->
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
  </div>
</template>

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

export default {
  components: { SidebarItem, Logo, Hamburger },
  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;
    },
  },
  mounted() {},
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
  },
};
</script>
<style lang="scss" scoped>
.hamburger-container {
  width: 46px;
  height: 46px;
  line-height: 46px;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;
  z-index: 99;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }
}
</style>