.#{$namespace} {
  &-sidebar {
    width: $sideBarWidth;
    height: 100%;
    font-size: 0px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1001;
    overflow: hidden;
    background-color: $sidebar-bg;
    box-shadow: 1px 0 10px rgba($primary, $alpha: 0.05);
    transition: all 0.1s;

    // logo
    .sidebar-logo {
      width: $sidebarLogoBoxWidth;
      height: $sidebarLogoBoxHeight;
      line-height: $sidebarLogoBoxHeight;
      background-color: $sidebar-bg;
      position: relative;
      text-align: center;
      overflow: hidden;
      color: $white;

      // 下边线
      &::after {
        content: "";
        width: 100%;
        height: 1px;
        @include position(0, null, null, 0);
        background: rgba($white, $alpha: 0.1);
      }

      // link
      &-link {
        height: 100%;
        width: 100%;
        @include flexBox(column, center, center);

        // logo
        .sys {
          // 默认图标
          &-logo {
            width: $sidebarLogoWidth;
            height: $sidebarLogoHeight;
            color: $white;
            font-size: $ft-bg - 2px;
          }
          // 小图标
          &-logo-mini {
            width: $sidebarLogoWidth-mini;
            height: $sidebarLogoHeight-mini;
          }
          // 名称
          &-title {
            font-weight: bold;
            color: $sidebarTitleColor;
            font-size: $sidebarTitleFont;
            height: 32px;
            line-height: 32px;
            text-align: center;
            display: block;
          }
        }
      }
      // 折叠后的logo
      &.collapse {
        width: $sidebarLogoBoxWidth-mini;
        height: $sidebarLogoBoxHeight-mini;

        .sys {
          // 图标
          &-logo {
            width: 0;
            height: 0;
          }
          // 名称
          &-title {
            font-size: 0;
            opacity: 0;
          }
        }
      }
    }

    // 菜单主体
    .sidebar-menu {
      height: 100%;

      &-wrapper {
        .el-menu {
          background-color: $sidebar-bg;
        }
        // 菜单列表
        .#{$namespace} {
          &-menu {
            &-list {
              width: 100%;
              height: 100%;
              border: 0 !important;
              background-color: $sidebar-bg;

              // 菜单统一配置(图标，文字，箭头，装饰，背景)
              .#{$namespace} {
                &-menu {
                  &-item {
                    li {
                      // 菜单图标，文字
                      .menu {
                        // 图标
                        &-icon {
                          width: $menu-icon-size;
                          height: $menu-icon-size;
                          fill: $menu-icon-color;
                          color: $menu-icon-color;
                          position: relative;
                          z-index: 99;
                          @include transition();
                        }
                        // 文字
                        &-title {
                          font-size: $menu-item-font;
                          color: $menu-text-color;
                          margin-left: 15px;
                          position: relative;
                          z-index: 99;
                          @include transition();
                        }
                      }

                      // 菜单折叠箭头
                      i {
                        color: $sidebar-icon-arrow-color;
                        font-size: $sidebar-icon-arrow-font;
                      }
                    }
                  }
                }
              }

              // ----------只有一级菜单
              .#{$namespace} {
                &-menu {
                  &-item {
                    // 标题
                    & > a > li {
                      padding: 0 20px;
                      position: relative;
                      color: $menu-text-color;
                      height: $menu-item-height;
                      line-height: $menu-item-line-height;

                      // 菜单左侧装饰
                      &::before {
                        content: "";
                        height: 0;
                        width: $menu-item-left-line-width;
                        background-color: $menu-item-left-line-color;
                        @include position(0, 0);
                        @include transition();
                        z-index: 99;
                      }

                      // 菜单经过
                      &:hover,
                      &.is-active {
                        // background-color: $menu-item-bg-color;
                        background: none;

                        //菜单经过文字图标颜色
                        .menu {
                          &-icon,
                          &-title {
                            color: $primary;
                            fill: $primary;
                          }
                        }
                      }
                      &:hover {
                        background-color: $menu-item-bg-color;
                      }

                      // 菜单选中
                      &.is-active {
                        // 菜单按下侧装饰
                        &::before {
                          // height: 100%;
                          height: 0;
                        }
                        .menu {
                          &-icon,
                          &-title {
                            color: $primary;
                            fill: $primary;
                          }
                        }
                      }
                    }
                  }
                }
              }
              //--------- 有二级子菜单(折叠)
              .#{$namespace} {
                &-menu {
                  &-item {
                    .#{$namespace} {
                      &-sub {
                        &-menu {
                          // 导航标题
                          .el-submenu__title {
                            padding: 0 20px;
                            position: relative;
                            color: $menu-text-color;
                            height: $menu-item-height;
                            line-height: $menu-item-line-height;

                            // 菜单左侧装饰
                            &::before {
                              content: "";
                              height: 0;
                              width: $menu-item-left-line-width;
                              background-color: $menu-item-left-line-color;
                              @include position(0, 0);
                              @include transition();
                              z-index: 99;
                            }

                            // 菜单经过
                            &:hover {
                              background-color: $menu-item-bg-color; //菜单经过背景

                              // 菜单经过左侧装饰
                              &::before {
                                height: 100%;
                              }
                              //菜单经过文字图标颜色
                              .menu {
                                &-icon,
                                &-title {
                                  color: $primary;
                                  fill: $primary;
                                }
                              }
                            }
                          }

                          // 二级菜单展开(标题)
                          &.is-opened {
                            .el-submenu__title {
                              background-color: $menu-item-bg-color;
                              // 菜单展开左侧装饰
                              &::before {
                                // height: 100%;
                                height: 0;
                              }

                              // 图标文字
                              .menu {
                                &-icon,
                                &-title {
                                  color: $primary;
                                  fill: $primary;
                                }
                              }
                            }
                          }
                          // 二级子菜单列表
                          .el-menu {
                            background: $sub-menu-bg;

                            .hui-sub-menu-item {
                              a {
                                li {
                                  transition: all 0.3s;
                                  .menu-title {
                                    font-size: $ft-sm;
                                    color: $menu-text-color;
                                    &::before {
                                      content: "";
                                      width: 6px;
                                      height: 6px;
                                      background-color: $menu-text-color;
                                      border-radius: 100%;
                                      display: inline-block;
                                      margin-right: 10px;
                                      vertical-align: middle;
                                    }
                                  }
                                  // 子菜单选中，经过
                                  &.is-active {
                                    .svg-icon,
                                    .menu-title {
                                      color: $primary !important;
                                      fill: $primary !important;
                                      &::before {
                                        background-color: $primary;
                                      }
                                    }
                                  }
                                  &:focus {
                                    background: none !important;
                                  }
                                  &:hover {
                                    background-color: $primary;

                                    .menu {
                                      &-title {
                                        color: $white;
                                        &::before {
                                          background-color: $white;
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// 折叠后的菜单
.hideSidebar {
  // 侧边栏菜单
  .hui-sidebar {
    .sidebar-menu {
      .hui-menu-list {
        .hui-menu-item {
          text-align: center;
          .el-submenu {
            .el-submenu__title {
              .menu-title,
              i {
                height: 0;
                width: 0;
                overflow: hidden;
                visibility: hidden;
                display: inline-block;
              }
            }
          }
        }
      }
    }
  }
}

// 折叠后弹出菜单
.el-menu--vertical {
  // left: 54px !important;
  display: block;
  // 子菜单太长的时候出滚动
  > .el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;
    .#{$namespace} {
      &-sub {
        &-menu {
          &-item {
            a {
              li {
                color: $menu-text-color;
                .menu-title {
                  margin-left: 10px;
                }
                &:hover {
                  color: $primary !important;
                  background: rgba($primary, $alpha: 0.1) !important;

                  .menu-title {
                    color: $primary;
                  }
                }
              }
            }
          }
        }
      }
    }

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

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

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}
.el-menu {
  background-color: $sidebar-bg;
}
// 侧边栏过渡
.sidebarLogoFade {
  &-enter {
    opacity: 0;
    &-active {
      transition: opacity 1.5s;
    }
  }
  &-leave-to {
    opacity: 0;
  }
}