dianshang-qianduan/src/assets/styles/sidebar.scss

#app {
  .main-container {
    height: calc(100% - 50px);
    transition: margin-left .28s;
    margin-left: $base-sidebar-width;
    position: relative;
  }
  .sidebarHide {
    margin-left: 0 !important;
  }
  .sidebar-container {
    -webkit-transition: width .28s;
    transition: width 0.28s;
    width: 239px !important;
    background: url('../images/sidebar-background.webp') no-repeat center;
    // background-color: $base-menu-background;
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: -8px;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }
    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 50px);
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .svg-icon {
      margin-right: 16px;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
      background-color: transparent !important;
      padding: 25px 18px;

      .el-sub-menu {
        margin-bottom: 15px !important;
        .el-sub-menu__title {
          height: 37px;
          line-height: 37px;
          background: url('../images/sidebar-normal.png') no-repeat;
          background-size: 100% 100% !important;
        }
        .el-menu {
          padding: 1px 18px !important;
          .el-menu-item {
            min-width: 100% !important;
            height: 30px;
            color: #fff;
            padding-left: 4px;
            background: transparent !important;
            margin-bottom: 0px;
            &:hover {
              background: transparent !important;
            }
          }
        }
      }
      .is-opened{
        margin-bottom: 0px !important;
      }
      .el-menu-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        height: 37px;
        line-height: 37px;
        color: #fff;
        background: url('../images/sidebar-normal.png') no-repeat;
        background-size: 100% 100% !important;
      }

      .is-active {
        background: url('../images/sidebar-active.png') no-repeat !important;
        .el-menu{
          .nest-menu{
            .is-active{
              color: #008efe !important;
            }
          }
        }
        .el-sub-menu__title {
          background: url('../images/sidebar-active.png') no-repeat !important;
          background-size: 100% 100% !important;
        }
      }

    }

    .el-menu-item,
    .menu-title {
      // overflow: hidden !important;
      // text-overflow: ellipsis !important;
      // white-space: nowrap !important;
    }

    .el-menu-item .el-menu-tooltip__trigger {
      display: inline-block !important;
    }

    // menu hover
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    & .theme-dark .is-active>.el-sub-menu__title {
      color: $base-menu-color-active !important;
    }

    & .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: $base-sidebar-width !important;

      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .theme-dark .el-sub-menu .el-menu-item {
      background-color: $base-sub-menu-background !important;

      &:hover {
        background-color: $base-sub-menu-hover !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;
            display: inline-block;
          }

          &>i {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }
  .el-menu--collapse .el-menu .el-sub-menu {
    min-width: $base-sidebar-width !important;
  }
  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform .28s;
      width: $base-sidebar-width !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$base-sidebar-width, 0, 0);
      }
    }
  }
  .withoutAnimation {
    .main-container,
    .sidebar-container {
      transition: none;
    }
  }

  .studentLayout,
  .teacherLayout {
    background:
      radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.74), transparent 34%),
      radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.24), transparent 28%),
      linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%);

    .main-container {
      margin-left: 304px;
      background:
        radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.72), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.22), transparent 28%),
        linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%);
    }

    .app-main,
    .teacher-main {
      height: calc(100vh - 50px);
      padding: 28px 32px 40px 24px;
      overflow: auto;
      background:
        radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%),
        radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%),
        linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important;

      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      &::-webkit-scrollbar-track {
        background: #111a24;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background: #2d8fcf;
        border-radius: 10px;
      }
    }

    .sidebar-container {
      top: 50px;
      width: 304px !important;
      height: calc(100% - 50px);
      padding: 0;
      background: transparent !important;
      border-right: 0;
      box-shadow: none;
      overflow: hidden;

      &::before {
        display: none;
      }

      &.student-sidebar-shell {
        position: fixed;
        z-index: 1;
        height: calc(100% - 50px);
        background: transparent !important;
      }

      .student-sidebar-scroll {
        height: 100%;
      }

      .scrollbar-wrapper {
        overflow-x: hidden !important;
      }

      .student-course-nav {
        width: calc(100% - 40px);
        min-height: calc(100% - 56px);
        margin: 28px 20px;
        padding: 24px 16px 28px;
        border: 1px solid rgba(0, 180, 255, 0.25);
        border-radius: 32px;
        background: rgba(8, 18, 28, 0.7);
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(169, 229, 255, 0.08);
        backdrop-filter: blur(12px);
      }

      .student-course-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 22px;
        margin: 0 0 14px;
        border: 0;
        padding: 0 6px;
        line-height: 1.35;
        text-align: left;
        color: #7e9fc5;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        white-space: normal;
        cursor: pointer;
        transition: color 0.2s ease;
      }

      .student-course-heading:hover,
      .student-course-heading.active {
        color: #c9edff;
      }

      .student-course-list {
        margin: 0 0 28px;
      }

      .student-course-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 42px;
        margin: 0 0 8px;
        border: 1px solid transparent;
        border-radius: 18px;
        padding: 10px 14px 10px 16px;
        line-height: 1.4;
        text-align: left;
        color: #d7e9ff;
        background: rgba(255, 255, 255, 0.025);
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0;
        white-space: normal;
        overflow: hidden;
        cursor: pointer;
        transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      }

      .student-course-icon {
        position: relative;
        z-index: 1;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border: 1px solid rgba(0, 170, 255, 0.26);
        border-radius: 10px;
        color: #7ee9ff;
        background:
          linear-gradient(135deg, rgba(0, 170, 255, 0.24), rgba(43, 110, 255, 0.08)),
          rgba(1, 24, 36, 0.82);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 10px rgba(0, 170, 255, 0.08);

        svg {
          width: 15px;
          height: 15px;
        }
      }

      .student-course-icon--heading {
        width: 22px;
        height: 22px;
        border-radius: 9px;
        color: #9defff;
        background: rgba(0, 132, 198, 0.18);

        svg {
          width: 13px;
          height: 13px;
        }
      }

      .student-course-text {
        min-width: 0;
        flex: 1;
      }

      .student-course-link:hover,
      .student-course-link.active {
        color: #ffffff;
        border-color: rgba(0, 170, 255, 0.72);
        background: linear-gradient(95deg, rgba(0, 160, 255, 0.2), rgba(0, 100, 200, 0.1));
        box-shadow: 0 2px 14px rgba(0, 170, 255, 0.18);
        transform: translateX(3px);
      }

      .student-course-link.active {
        border-left: 3px solid #00aaff;
      }

      .student-course-link.disabled {
        cursor: default;
      }

      .student-report-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: calc(100% - 28px);
        min-height: 44px;
        margin: 18px 14px 0;
        border: 1px solid rgba(0, 170, 255, 0.65);
        border-radius: 40px;
        line-height: 42px;
        text-align: center;
        color: #caf0ff;
        background: rgba(0, 160, 255, 0.15);
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        transition: background 0.2s ease, box-shadow 0.2s ease;

        &:hover,
        &.active {
          color: #ffffff;
          background: rgba(0, 170, 255, 0.26);
          box-shadow: 0 0 14px rgba(34, 183, 237, 0.32);
        }
      }
    }
  }

  .mobile.studentLayout,
  .mobile.teacherLayout {
    .main-container {
      margin-left: 0;
    }

    .sidebar-container {
      width: 304px !important;
    }

    &.hideSidebar {
      .sidebar-container {
        transform: translate3d(-304px, 0, 0);
      }
    }
  }

  .teacherLayout {
    .sidebar-container {
      border-right: 1px solid rgba(0, 180, 255, 0.24);

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        width: 1px;
        background: linear-gradient(180deg, rgba(81, 211, 255, 0.38), rgba(81, 211, 255, 0.18) 45%, rgba(81, 211, 255, 0.28));
        pointer-events: none;
      }

      .student-sidebar-scroll,
      .el-scrollbar__wrap,
      .el-scrollbar__view {
        height: 100%;
      }

      .el-scrollbar__bar.is-vertical {
        right: 4px;
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      &:hover .el-scrollbar__bar.is-vertical {
        opacity: 1;
      }

      .student-course-nav {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 28px 20px;
        box-sizing: border-box;
        border: 0;
        border-radius: 0;
        background:
          radial-gradient(circle at 18% 10%, rgba(0, 170, 255, 0.12), transparent 34%),
          rgba(8, 18, 28, 0.82);
        box-shadow: inset -1px 0 0 rgba(169, 229, 255, 0.06), 12px 0 32px rgba(0, 5, 16, 0.2);
      }

      .student-course-list {
        margin-bottom: 0;
      }

      .student-course-link {
        min-height: 46px;
        margin-bottom: 10px;
      }

      .teacher-sidebar-toggle {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 8;
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border: 1px solid rgba(89, 218, 255, 0.5);
        border-radius: 9px;
        color: #dff8ff;
        background: rgba(5, 54, 83, 0.84);
        box-shadow: 0 0 14px rgba(0, 170, 255, 0.15);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

        &:hover {
          border-color: #70e4ff;
          background: rgba(11, 116, 160, 0.8);
          transform: translateX(1px);
        }
      }
    }

    &.hideSidebar {
      .sidebar-container {
        width: 64px !important;

        .student-course-nav {
          padding: 58px 10px 24px;
        }

        .student-course-heading,
        .student-course-link {
          justify-content: center;
          padding-right: 0;
          padding-left: 0;
        }

        .student-course-heading {
          margin-bottom: 14px;
        }

        .student-course-link {
          min-height: 42px;
          margin-bottom: 10px;
        }

        .student-course-text {
          display: none;
        }

        .teacher-sidebar-toggle {
          right: 16px;
          transform: none;
        }
      }

      .main-container {
        margin-left: 64px;
      }
    }
  }
}
// when menu collapsed
.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 16px;
    }
  }

  .nest-menu .el-sub-menu>.el-sub-menu__title,
  .el-menu-item {
    &:hover {
      // you can use $sub-menuHover
      background-color: rgba(0, 0, 0, 0.06) !important;
    }
  }

  // the scroll bar appears when the sub-menu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}