cv-portfolio/css/sidebar.scss

aside {
    @media screen and (max-width: 767px) {
        transform: translateX(-175px);
        z-index: 5;
    }
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 175px;
    height: 100vh;
    background: var(--dark-darker);

    @media screen and (min-width: 920px) {
        width: 280px;
    }

    .logo-wrapper {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        margin: var(--gap) auto;
        //border: 2px solid var(--green);
        //border-radius: 50%;
        font-size: 50px;
        background: linear-gradient(
                        to bottom,
                        var(--green-lighter) 0%,
                        var(--green) 50%,
                        var(--dark) 50%,
                        var(--dark-darker) 100%
        );

        @media screen and (min-width: 920px) {
            width: 200px;
            height: 200px;
            font-size: 100px;
        }

        .logo {
            margin: 0 auto;
            text-shadow: 5px 5px 5px var(--dark-lighter);
        }
    }
}

.copyright-wrapper {
    position: absolute;
    bottom: 0;
    padding: var(--gap);
    font-size: 16px;
    text-align: center;
}

nav {
    height: 100%;
    overflow-y: scroll;
    margin-bottom: 150px;
}

.nav-btn {
    display: block;
    margin: var(--gap-s) var(--gap);
    padding: 10px 20px;
    color: var(--light);
    text-align: center;
    border: 2px solid var(--green);

    &:hover {
        background: var(--green);
        color: var(--light);
    }

    &:before {
        content: '⇩';
        margin-right: 20px;
    }
}

.nav-link {
    display: inline-block;
    padding: var(--gap-s) var(--gap);
    font-size: 18px;

    @media screen and (min-width: 920px) {
        font-size: 22px;
    }

    &.active {
        color: var(--blue-lighter);
    }
}

// Mobile navigation
.mobile-nav {
    @media screen and (max-width:767px) {
        display: block;
    }

    @media screen and (min-width: 768px) {
        display: none;
    }
}

.mobile-nav.open  > span {
    top: 25px;
    transform: rotate(45deg);
}
.mobile-nav.open  > span::before {
    top: 0;
    transform: rotate(0deg);
}
.mobile-nav.open  > span::after {
    top: 0;
    transform: rotate(90deg);
}
.mobile-nav.open + aside {

}
.mobile-nav {
    position: absolute;
    top: 40px;
    right: -75px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1;

    &.open {
        top: 15px;
    }
}
.mobile-nav > span,
.mobile-nav > span::before,
.mobile-nav > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: var(--green);
    transition-duration: .25s;
}
.mobile-nav > span::before {
    content: '';
    top: -15px;
}
.mobile-nav > span::after {
    content: '';
    top: 15px;
}