.wrapper{

display:flex;

min-height:100vh;

}

.sidebar{

width:260px;

background:#111827;

color:#fff;

position:fixed;

top:0;

left:0;

bottom:0;

overflow-y:auto;

}

.main{

margin-left:260px;

width:100%;

background:#f5f7fb;

min-height:100vh;

}

.logo{

padding:25px;

font-size:30px;

font-weight:bold;

text-align:center;

border-bottom:1px solid rgba(255,255,255,.1);

}

.sidebar ul{

list-style:none;

padding:0;

margin:0;

}

.sidebar li{

margin:5px 0;

}

.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    color:#cbd5e1;
    border-left:4px solid transparent;
    transition:.25s;
    text-decoration: none;
}

.sidebar a:hover{
    background:#1e293b;
    color:#fff;
    border-left-color:#3b82f6;
}

.sidebar a.active{
    background:#2563eb;
    color:#fff;
    border-left-color:#60a5fa;
}

.sidebar i{
    font-size:20px;
}