src/assets/styles/sidebar.scss
@@ -4,7 +4,7 @@
    transition: margin-left 0.28s;
    margin-left: $base-sidebar-width;
    position: relative;
    background: #f5f7fb;
    background: transparent;
  }
  .sidebarHide {
@@ -22,8 +22,9 @@
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    padding: 12px 0 16px 16px;
    background: transparent;
    box-shadow: none;
    // reset element-ui css
    .horizontal-collapse-transition {
@@ -45,7 +46,8 @@
    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 50px);
        height: calc(100% - 72px);
        margin-top: 10px;
      }
    }
@@ -63,11 +65,16 @@
      margin-right: 16px;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
      padding: 10px 8px 18px;
      border-radius: 22px;
      background: var(--menu-surface);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-sm);
    }
    .el-menu-item,
    .menu-title {
@@ -80,80 +87,144 @@
      display: inline-block !important;
    }
    // menu hover
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: rgba(212, 221, 255, 0.8) !important;
      }
    }
    // menu hover
    .submenu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: var(--menu-hover) !important;
        border-radius: 14px;
      }
    }
    & .theme-light .is-active > .el-sub-menu__title {
      color: #fff !important;
      color: var(--current-color) !important;
    }
    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: $base-sidebar-width !important;
    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: 0 !important;
      margin: 0 12px 6px;
      width: calc(100% - 24px);
      padding-left: 8px !important;
      padding-right: 8px !important;
      box-sizing: border-box;
      &:hover {
        background-color: var(--menu-hover) !important;
      }
      &.is-active {
        background-color: var(--menu-active-bg) !important;
        border-radius: 14px;
      }
    }
      &:hover {
        background-color: rgba(212, 221, 255, 0.8) !important;
      }
      &.is-active {
        background-color: #fff !important;
      }
    }
    & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .theme-light .el-sub-menu .el-menu-item {
      //background-color: transparent;
      &:hover {
        background-color: var(--menu-hover) !important;
        border-radius: 14px;
      }
    }
  }
    & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .theme-light .el-sub-menu .el-menu-item {
      //background-color: transparent;
  .hideSidebar {
    .sidebar-container {
      width: 68px !important;
      padding-left: 0;
      padding-right: 0;
    }
    .main-container {
      margin-left: 84px;
    }
      &:hover {
        background-color: rgba(212, 221, 255, 0.8) !important;
      }
    }
  }
  .hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }
    .main-container {
      margin-left: 54px;
    }
    .sub-menu-title-noDropdown {
      padding: 0 !important;
      position: relative;
      .el-tooltip {
        padding: 0 !important;
        .svg-icon {
          margin-left: 20px;
        }
      }
    }
    .el-sub-menu {
      overflow: hidden;
      & > .el-sub-menu__title {
        padding: 0 !important;
        .svg-icon {
          margin-left: 20px;
        }
      }
    }
    .el-menu--collapse {
      .el-sub-menu {
        & > .el-sub-menu__title {
          & > span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;
      display: flex !important;
      align-items: center;
      justify-content: center;
      .svg-icon {
        margin-right: 0;
      }
      .el-tooltip {
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        .svg-icon {
          margin-left: 0;
        }
      }
      .el-menu-tooltip__trigger {
        width: 100%;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        .svg-icon {
          width: 18px;
          height: 18px;
          margin-right: 0;
          flex-shrink: 0;
        }
      }
    }
    .el-sub-menu {
      overflow: hidden;
      & > .el-sub-menu__title {
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        .svg-icon {
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
    .el-menu--collapse {
      width: 100% !important;
      padding: 10px 6px 18px;
      > .el-menu-item,
      .el-sub-menu {
        & > .el-sub-menu__title,
        &.el-menu-item {
          margin: 0 0 6px;
          width: 100%;
          padding-left: 0 !important;
          padding-right: 0 !important;
          box-sizing: border-box;
          display: flex !important;
          align-items: center;
          justify-content: center;
          .svg-icon {
            width: 18px;
            height: 18px;
            margin-right: 0;
            flex-shrink: 0;
          }
          &:hover {
            border-radius: 14px;
          }
          & > span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
          & > i {
@@ -162,11 +233,11 @@
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }
          }
        }
      }
    }
  }
  .el-menu--collapse .el-menu .el-sub-menu {
    min-width: $base-sidebar-width !important;
@@ -208,24 +279,36 @@
    }
  }
  .nest-menu .el-sub-menu > .el-sub-menu__title,
  .el-menu-item {
    &:hover {
      // you can use $sub-menuHover
      background-color: rgba(212, 221, 255, 0.56) !important;
    }
    &.is-active {
      background-color: rgba(212, 221, 255, 0.56) !important;
    }
  }
  .nest-menu .el-sub-menu > .el-sub-menu__title,
  .el-menu-item {
    min-width: 0 !important;
    margin: 0 12px 6px;
    width: calc(100% - 24px);
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
    &:hover {
      // you can use $sub-menuHover
      background-color: var(--menu-hover) !important;
    }
    &.is-active {
      background-color: var(--menu-active-bg) !important;
      border-radius: 14px;
    }
  }
  // the scroll bar appears when the sub-menu is too long
  > .el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
      background: #dfe7e1;
    }
    &::-webkit-scrollbar {
@@ -233,7 +316,7 @@
    }
    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      background: #9aa79e;
      border-radius: 20px;
    }
  }