.j-sidenav-button-container {
    display: inline-block;
    cursor: pointer;
}

.j-sidenav-button-bar1,
.j-sidenav-button-bar2,
.j-sidenav-button-bar3 {
    width: 35px;
    height: 5px;
    background-color: $j-sidenav-button-color;
    margin: 6px 0;
    transition: 0.4s;
}

.j-sidenav-button-change .j-sidenav-button-bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: $j-sidenav-button-active-color;
}

.j-sidenav-button-change .j-sidenav-button-bar2 {
    opacity: 0;
    background-color: $j-sidenav-button-active-color;
}

.j-sidenav-button-change .j-sidenav-button-bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: $j-sidenav-button-active-color;
}