soc_web/src/layout/components/Sidebar/index.vue

<template>
  <div>
    <div
      :class="{ 'has-logo': showLogo,  }"
      :style="{
        backgroundColor:
          settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff',
      }"
    >
      <logo v-if="showLogo" :collapse="isCollapse" />
      <div class="scro">
        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :background-color="
            settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff'
          "
          :text-color="
            settings.sideTheme === 'theme-dark' ? '#bfcbd9' : 'rgba(0,0,0,.70)'
          "
          :unique-opened="true"
          :active-text-color="settings.theme"
          :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>
      </div>

      <div class="bottomBox">
        <hamburger
          id="hamburger-container"
          :is-active="sidebar.opened"
          class="hamburger-container"
          @toggleClick="toggleSideBar"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
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;
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
  },
};
</script>
<style lang="scss" scoped>
.hamburger {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}
.scro {
  position: relative;
  height: 90vh;
  width: 100%;
  overflow-y: auto !important;
}
.bottomBox {
  //   position: absolute;
  position: relative;
  width: 100%;
  margin-top: 10px;
  padding-left: 10px;

  bottom: 2%;
  border-top: #ccc;
  .hamburger-container {
    // text-align: center;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

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