// 侧边栏
.sidebar {
  display: flex;
  width: $sidebar-width;
  height: 100%;
  flex-direction: column;
  background: $sidebar-bg;
}

// 头部
.sidebar-header {
  display: flex;
  padding: $sidebar-header-padding;
  align-items: center;
  font-size: $sidebar-font-size;
  line-height: $sidebar-header-logo-size;
  color: $sidebar-header-color;
  border-bottom: $border-width solid $sidebar-header-border-color;

  img {
    width: $sidebar-header-logo-size;
    height: $sidebar-header-logo-size;
    margin-right: $sidebar-header-logo-margin-right;
  }
}

// 主内容
.sidebar-body {
  position: relative;
  overflow: hidden;
  flex: 1;

  .nav-item,
  .nav-link {
    display: block;
  }

  .nav-item > a,
  .nav-link > a,
  .collapse-title {
    display: block;
    padding: $sidebar-nav-item-padding;
    font-size: $sidebar-font-size;
    line-height: $sidebar-line-height;
    cursor: pointer;
    text-decoration: none;
    color: $sidebar-nav-item-color;
  }

  .nav .collapse-body .nav {
    .nav-item > a,
    .nav-link > a {
      padding-left: $sidebar-nav-item-padding-inside;
    }
  }

  .secondary-collapse .collapse-title {
    padding-left: $sidebar-nav-item-padding-inside;
  }

  .collapse > .collapse-title {
    > i:nth-last-child(2) {
      width: $sidebar-icon-size;
      height: $sidebar-icon-size;
      margin-right: $sidebar-header-logo-margin-right;
      line-height: $sidebar-icon-size;
      text-align: center;
      vertical-align: top;
    }
  }

  .collapse-body {
    text-indent: 0;
  }

  // 二级菜单增加缩进
  .secondary-collapse {
    .nav-item,
    .nav-link {
      display: block;
      text-indent: 0;

      & > a {
        padding-left: $sidebar-nav-item-secondary-padding-left;
      }
    }
  }

  .collapse-title:hover,
  .nav-item:hover,
  .nav-item.active {
    color: $sidebar-nav-item-active-color;
    background-color: $sidebar-nav-item-active-bg;
  }

  .nav-item {
    position: relative;
    padding: 0;
    background-color: transparent;

    &.active::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: rem(4px);
      content: "";
      background-color: $brand-primary;
    }

    &.disabled {
      color: inherit;

      &:hover {
        background-color: transparent;
      }

      & > .nav-link > a {
        cursor: not-allowed;
      }
    }
  }

  .collapse-title-addon {
    margin-right: rem(10px);
  }
}

// 底部
.sidebar-footer {
  display: flex;
  height: $sidebar-footer-height;
  font-size: $sidebar-footer-font-size;
  line-height: $sidebar-footer-height;
  border-top: $border-width solid $sidebar-footer-border-color;

  &-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    color: $sidebar-nav-item-color;

    &:hover {
      text-decoration: none;
      color: $sidebar-nav-item-active-color;
      background-color: $sidebar-nav-item-active-bg;
    }
  }
}
