.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: 70px;
    height: 100vh;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    transition: .35s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-md);
}

.sidebar:hover{
    width: 260px;
}

.sidebar__header{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:120px;
    margin-bottom: 2rem;
}

.sidebar__logo{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    padding:.5rem;
}

.sidebar__logo img{
    width:100%;
    max-width:120px;
    height:auto;
    transition:
        transform .35s ease;
}

.sidebar:hover .sidebar__logo img{
    transform:scale(1.08);
    max-width: 120;
}

.sidebar__nav{
    flex:1;
    display:flex;
}

.sidebar__menu{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1.3rem;
    list-style:none;
}

.sidebar__item{
    width:100%;
}

.sidebar__link{
    position:relative;
    display:flex;
    align-items:center;
    gap:1rem;
    padding:18px 22px;
    color:var(--color-text);
    text-decoration:none;
    transition:.30s;
}

.sidebar__link:hover{
    background:rgba(255,255,255,.05);
}

.sidebar__link::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:4px;
    height:0;
    background:#3b82f6;
    border-radius:0 4px 4px 0;
    transform:translateY(-50%);
    transition:.30s;
}

.sidebar__link:hover::before{
    height:65%;
}

.sidebar__icon{
    font-size:1.35rem;
    min-width:28px;
    display:flex;
    justify-content:center;
    transition:.30s;
}

.sidebar__link:hover .sidebar__icon{
    transform:scale(1.12);
}

.sidebar__text{
    white-space:nowrap;
    opacity:0;
    transform:translateX(-12px);
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.sidebar:hover .sidebar__text{
    opacity:1;
    transform:translateX(0);
}

.sidebar__link.active{
    background:rgba(59,130,246,.12);
    color:#ffffff;
}

.sidebar__link.active::before{
    height:70%;
}

.sidebar__link.active .sidebar__icon{
    color:#3b82f6;
}

.sidebar__link.active .sidebar__text{
    font-weight:600;
}