main-web/src/layouts/components/sidebar/Sidebar.vue

<template>
  <el-aside
    class="sidebar-container"
    width="190px"
    :collapsed="isCollapsed"
    :class="isCollapsed && 'collapsed'"
  >
    <el-scrollbar class="scrollbar-wrapper">
      <BaseMenu
        v-bind="menuProps"
        class="sidebar-menu"
        @select="selectItem"
      ></BaseMenu>
    </el-scrollbar>
    <OperateBtn class="operate" @click="$emit('toggleCollapsed')"> </OperateBtn>
  </el-aside>
</template>

<script>
import { computed } from "vue";
import BaseMenu from "./BaseMenu.vue";
import OperateBtn from "./OperateBtn.vue";
import useMenuColorConfig from "./useMenuColorConfig";
import useBreakPoint from "./useBreakPoint";

export default {
  components: { BaseMenu, OperateBtn },
  props: {
    isCollapsed: {
      type: Boolean,
      default: false
    },
    menuData: {
      type: Array
    },
    isLimitLevel: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: "/"
    },
    matchPath: {
      type: String,
      default: ""
    },
    selectItem: {
      type: Function
    }
  },
  setup(props, { emit }) {
    const { menuColorConfig } = useMenuColorConfig();
    const menuProps = computed(() => {
      const { menuData, isLimitLevel, basePath, matchPath, isCollapsed } =
        props;
      return {
        menuData,
        isLimitLevel,
        basePath,
        matchPath,
        collapse: isCollapsed,
        ...unref(menuColorConfig),
        mainMenu: true,
        uniqueOpened: true
      };
    });
    useBreakPoint('xl', emit)
    return {
      menuProps
    };
  }
};
</script>
<style lang="scss" scoped>
.sidebar-container {
  position: relative;
  background: var(--custom-base-color-background);
  color: var(--custom-base-color-text);
  z-index: 3;
  transition: width 0.2s;
  overflow: hidden;
  height: 100%;
  &.collapsed {
    width: 48px !important;
    overflow: initial;
    .operate {
      position: absolute;
      left: 25px;
      transform: rotate(90deg);
      transition: left 0.1s;
      z-index: -1;
      &:hover {
        left: 28px;
      }
    }
  }
  .scrollbar-wrapper {
    height: 100%;
    :deep(.el-scrollbar__view) {
      height: 100%;
    }
    :deep(.el-scrollbar__wrap) {
      overflow-x: hidden;
    }
  }
  .operate {
    position: absolute;
    left: 155px;
    top: 50%;
    font-size: 18px;
    cursor: pointer;
    transform: rotate(-90deg);
    transition: left 0.1s;
    &:hover {
      left: 150px;
    }
  }
}
</style>