.menuItem {
  .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: url('./images/menu_active.png') no-repeat left center;
    background-size: contain;
    @apply text-white;

    .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;
    }
  }
}