.item.home .bar .mid .info .logo::before{ background-image: url('~projects/app-a/src/assets/images/icons/home_page_24dp.svg'); } .items{ padding-left: 24px; } .item { .bar { display: flex; flex-direction: row; align-items: center; padding: 7.5px 0 0 0; .left { flex-shrink: 0; width: 24px; height: 24px; .toggle { border:none; width: 100%; height: 100%; transform: rotate(90deg); transition: transform .3s; } } .mid { flex-grow: 1; .info { display: flex; flex-direction: row; align-items: center; .logo { display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; width: 40px; height: 40px; margin-right: 16px; border-radius: 100px; background-color: #0070BA; color: #ffffff; span{ display: none; } &::before { content: ""; display: block; background: transparent url("~projects/app-a/src/assets/images/icons/web_page_24dp.svg")no-repeat; width: 24px; height: 24px; } img { width: 100%; height: 100%; border-radius: 100px; object-fit: cover; background-color: #ffffff; } } .name { p { margin: 0; a { color: var(--second); } &.sub { } } } } } .right { display: flex; flex-direction: row; align-items: center; flex-shrink: 1; button { margin-left: 16px; } .move{ cursor: move; } } .right-home { width: 120px; } } .items { display: none; } &.active { >.bar { .left { .toggle { transform: rotate(180deg); } } } >.items { display: block; } } } @media screen and (max-width: 1360px) { .item { .bar { .mid { .info .logo { display: none; } } .right { display: none; } } .items { } &.company { .items { } } } }