.menuItem {
  box-sizing: border-box;
  border-right: 4px solid transparent;
  .icon1 {
    background: url('./images/1.png') no-repeat center;
    background-size: contain;
  }
  .icon2 {
    background: url('./images/2.png') no-repeat center;
    background-size: contain;
  }
  .icon3 {
    background: url('./images/3.png') no-repeat center;
    background-size: contain;
  }
  .icon4 {
    background: url('./images/4.png') no-repeat center;
    background-size: contain;
  }
  .icon5 {
    background: url('./images/5.png') no-repeat center;
    background-size: contain;
  }
  &.active,
  &:hover {
    background-color: #e9fff8;
    color: #2dc7aa;
    border-right-color: #2dc7aa;

    .icon1 {
      background: url('./images/1-active.png') no-repeat center;
      background-size: contain;
    }
    .icon2 {
      background: url('./images/2-active.png') no-repeat center;
      background-size: contain;
    }
    .icon3 {
      background: url('./images/3-active.png') no-repeat center;
      background-size: contain;
    }
    .icon4 {
      background: url('./images/4-active.png') no-repeat center;
      background-size: contain;
    }
    .icon5 {
      background: url('./images/5-active.png') no-repeat center;
      background-size: contain;
    }
  }
}
