docs/styles/sidebar.scss

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 260px;
    font-size: 0.875rem;
    max-height: 100%;
    overflow-y: auto;

    ul {
        list-style: none;
        margin-left: 4px;
        border-left: 2px solid #aaa;

        @media (prefers-color-scheme: dark) {
            border-color: #555;
        }
    }
    li {
        padding-left: 6px;
        margin-left: -1px;
        color: #999;

        @media (prefers-color-scheme: dark) {
            color: #aaa;
        }

        &.active {
            padding-left: 4px;
            border-left: 2px solid #f5417d;
            color: #f5417d;
        }
    }

    a {
        display: block;
        padding: 4px 0 4px 6px;
        font-weight: 500;
        text-decoration: none;

        &,
        &:visited {
            color: inherit;
        }
        &:hover {
            color: #f5417d;
        }
    }
}

// @media (max-width: {}