his/openhis-ui-vue3/src/layout/components/Sidebar/index.vue

<template>
  <div
    :class="[
      'sidebar-wrapper',
      { 'has-logo': showLogo },
      { 'is-collapse': isCollapse }
    ]"
    :style="{
      backgroundColor:
        sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
    }"
  >
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar class="sidebar-scrollbar">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="
          sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
        "
        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="true"
        :active-text-color="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>
</template>

<script setup>
import Logo from './Logo';
import SidebarItem from './SidebarItem';
import variables from '@/assets/styles/variables.module.scss';
import useAppStore from '@/store/modules/app';
import useSettingsStore from '@/store/modules/settings';
import usePermissionStore from '@/store/modules/permission';
import {computed} from 'vue';
import {useRoute} from 'vue-router';

const route = useRoute();
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();

const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
  const { meta, path } = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.sidebar-wrapper {
  width: $sideBarWidth;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.28s;
  flex-shrink: 0;

  &.is-collapse {
    width: 54px;
  }

  .mobile & {
    position: fixed;
    z-index: 1001;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(0);
    transition: transform 0.28s;
  }

  .is-collapse.mobile & {
    transform: translateX(-100%);
  }
}

.has-logo {
  .sidebar-scrollbar {
    height: calc(100% - #{$logoHeight});
  }
}

.sidebar-scrollbar {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.el-menu {
  border: none;
  height: 100%;
  width: 100% !important;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;

  .svg-icon {
    margin-right: 8px;
  }
}

:deep(.el-menu-item) {
  &.is-active {
    background-color: var(--current-color) !important;
  }
}

:deep(.el-sub-menu) {
  .el-menu-item {
    min-width: $sideBarWidth !important;
  }

  &.is-active {
    > .el-sub-menu__title {
      color: var(--current-color) !important;
    }
  }
}

:deep(.el-menu--collapse) {
  .el-menu-item,
  .el-sub-menu__title {
    padding: 0 20px !important;
    text-align: center;

    span {
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;
    }
  }

  .svg-icon {
    margin-right: 0 !important;
  }

  .el-sub-menu {
    &.is-opened {
      > .el-sub-menu__title .el-icon-arrow-right {
        display: none;
      }
    }
  }
}
</style>