docs/source/_static/scss/includes/_aside.scss

// ----------------------
// Sidebar
// ----------------------
div.sidebar {
    width: $sidebar-width;
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--sidebar-bg);
    transition: opacity 400ms, transform 300ms;
    padding: var(--content-padding);
    overflow-y: auto;
    height: 100vh;
    z-index: $z-index-header - 2;
    margin: 0;
    border: none;

    @include breakpoint-min(breakpoints(lg)) {
        .hide-aside {
            display: none;
        }
    }

    @include breakpoint-max(breakpoints(lg)) {
        position: fixed;
        left: 0;
        top: 0;
        z-index: $z-index-header + 1;
        box-shadow: 0.5rem 0 0.75rem rgba(0, 0, 0, 0.175);
        display: none;
        
        .hide-aside {
            text-align: right;
            margin: 0 -0.75rem 1rem 0;
        }
    }
}

.doc-active {
    div.sidebar {
        display: block;
    }
}

.sidebar__title {
    margin: 0 0 1rem;
    font-size: $font-size-md;
    font-weight: $font-weight-bold;
    display: block;

    &, &:hover {
        color: var(--headings-color);
    }
}

// ----------------------
// Docs Navigation
// ----------------------
.docs {
    font-size: $font-size-sm;

    ul {
        list-style: none;
        margin: 0;

        & > li {
            & > a {
                color: var(--text-muted-color);
                display: block;
                padding: 0.4rem 0;

                &:hover {
                    color: var(--text-color);
                }
            }

            &.current > a,
            & > a.current {
                font-weight: $font-weight-medium;
                color: var(--docs-nav-active-color);
            }
        }

        ul {
            margin-left: 1rem;
        }
    }
}

.docs__title {
    margin: 2rem 0 0.5rem;
    border-bottom: 1px solid var(--docs-nav-group-border-color);
    color: var(--text-color);
    font-weight: $font-weight-medium;
    padding-bottom: 0.3rem;
}


// ----------------------
// Misc
// ----------------------
.aside-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 11;
    cursor: pointer;
}