:root{
    --nsb-height: clamp(100vh, 50em, 130vh);
}

nav.sidebar{
    width: 20%;
    background: var(--color-primary); color: #fff;
    /* display:inline-block; */
    height:var(--nsb-height);
    padding:2% 2% 15em;
    overflow:auto;
    scrollbar-width:none;
    position:relative;

    background: #fff;
    color: var(--color-primary);
    /* display:inline-block !important; */
    height: 100vh;
    position: sticky;
    /* display: inline-block !important; */
    float: left;
    top: 0;
}

.sidebar-cover{
    height:var(--nsb-height);
    width: 20%;
    background-image: linear-gradient(to top, var(--color-primary), var(--color-primary-low-o));
    background-image: linear-gradient(to top, var(--color-primary), var(--color-primary-low-o) 30%, transparent);
    position: absolute;
    left:0;
    top:0;
    display: inline-block;
    pointer-events:none;

    display:none !important;
}

nav.sidebar a{
    padding:1em;
    color:inherit;
    text-decoration:none;
    display:flex;
    gap:1em;
    font-size:0.9em;
    align-items:center;
    border-radius:0.2em;
}

nav.sidebar a:hover{
    background: var(--color-primary);
    color:#fff;
}

nav.sidebar a i{
    width:1em;
}