aside {
    position: sticky;
    top: 10px;
    background-color: #E5ECF0;
    border: 1px solid #E5ECF0;
    border-radius: var(--border-radius-lg);
    width: 300px;
    height: calc(100vh - var(--header-size) - var(--space-lg) * 2 - var(--footer-size) - 10px); /* 10px - отступ сайдбара снизу */
    transition: width 0.2s;
    & * {
        outline: none;
    }
    & .nav-tabs {
        gap: 10px;
        border-bottom: none;
        margin: 10px;
    }
    & .tab-pane {
        margin-right: 10px;
    }
    & .tab-content {
        height: calc(100% - 55px);
        overflow: hidden;
        overflow-y: visible;
        margin: 5px 0 5px 5px;
        padding: 5px;
    }
}
.aside_collapsed {
    width: 50px;
    & .nav-tabs {
        flex-direction: column;
        align-items: center;
    }
}
.aside_collapsed .tab-content {
    display: none;
}
.aside_collapsed .nav-item {
    order: 1;
    & .aside__tab-icon.active {
        opacity: .5;
        color: var(--color-brand-700);
    }
    & .aside__tab-icon:hover {
        opacity: .8 !important;
    }
}
.nav-item.aside__toggle {
    margin-left: auto;
    & .aside__tab-icon {
        opacity: 1;
    }
}
.aside_collapsed .aside__toggle {
    display: none;
}
.aside__tab-icon {
    color: var(--color-brand-700);
    opacity: .5;
    padding: 0;
    border: none;
    background: inherit;
    position: relative;
    transition: opacity .2s;
    & svg {
        width: 25px;
    }
    &.active {
        opacity: 1;
    }
}
.aside__tab-icon__badge {
    position: absolute;
    top: 0;
    left: 100%;
    padding: 6px;
    transform: translate(-75%, -33%);
    background: var(--bs-danger);
    border: 1px solid var(--bs-light);
    border-radius: 50%;
}
.aside-header {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    & svg {
        color: var(--color-brand-700);
    }
}
.aside-header__title {
    font-size: 18px;
    margin-left: 5px;
}