nano-buckets/resources/scss/components/_sidebar.scss

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    max-width: 33%;
    z-index: 1;

    visibility: hidden;
    transition: visibility 0s linear 0.5s;

    &__body {
        @extend .panel__body;
    }

    &__inner {
        @extend .panel;
        position: relative;
        height: 100%;

        transition: transform 0.2s;
        transform: translateX(-100%);
    }

    &__footer {
        position: fixed;
        left: 0;
        bottom: 0;

        display: flex;
        justify-content: space-between;

        background: var(--background);
        width: 100%;
        padding: 1rem;
    }

    &:before {
        position: fixed;

        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        transition: background-color 0.5s;
        z-index: 0;
        
        content: "";
    }

    &--open {
        visibility: visible;
        transition: visibility 0s linear 0s;

        .sidebar__inner {
            transform: translateX(0);
        }

        &:before {
            background: rgba(0,0,0,.7);
        }
    }
}