wxlitian/miniprogram/components/sidebar/sidebar-item/index.less

.n-sidebar-item {
  --sidebar-text-color: #777;
  --sidebar-selected-color: #e73535;
  --sidebar-border-width: 3px;
  --sidebar-bg-color: #f6f8fa;
  --sidebar-bg-selected-color: #fff;

  display: flex;
  padding: 30rpx 16rpx;
  gap: 10rpx;
  align-items: center;
  color: var(--sidebar-text-color);
  background: var(--sidebar-bg-color);
  transition: all linear 0.1s;

  &:nth-child(1) {
    border-top: 0;
  }

  &.selected {
    background-color: var(--sidebar-bg-selected-color);
    color: var(--sidebar-selected-color);

    .n-sidebar-item-border {
      animation: growup 0.1s;
      border-left-color: var(--sidebar-selected);
    }
  }

  &-border {
    flex-shrink: 0;
    height: 40rpx;
    border-radius: 6rpx;
    border-left-style: solid;
    border-left-width: var(--sidebar-border-width);
    border-left-color: transparent;
  }

  &-content {
    font-size: 30rpx;
    flex: 1;
    text-align: center;
    height: 40rpx;
  }

  @keyframes growup {
    0% {
      height: 0px;
    }

    60% {
      height: 32rpx;
    }

    72% {
      height: 26rpx;
    }

    100% {
      height: 40rpx;
    }
  }
}