app.component.scss

@media only screen and (max-width: 550px) {
    /* phones */
    .desktop{
        display:none;
    }

    .mobile{
        display: flex;
    }
}

.mobile {
    justify-content: flex-end;
    .container{
        width:15%;
        padding-left: 5%;

        cursor: pointer;

        .bar1, .bar2, .bar3 {
            width: 30px;
            height: 3px;
            background-color: white;
            margin: 6px 0;
            transition: 0.4s;
        }

        &.open {
            .bar1 {
                -webkit-transform: rotate(-45deg) translate(-6px, 4px);
                transform: rotate(-45deg) translate(-6px, 4px);
            }
            .bar2 {
                opacity: 0;
            }
            .bar3 {
                -webkit-transform: rotate(45deg) translate(-8px, -8px);
                transform: rotate(45deg) translate(-8px, -8px);
            }
        } 
    }
}