.sidebar {
    min-width: $sidebarWidth;
    max-width: $sidebarWidth;
    box-shadow: -3px 0 10px 5px rgba(0,0,0,.1);
    color: $dark;
    transition: all 0.3s;
    position: relative;

    .logo {
        width: 200px;
    }

    ul li{
        /* Sub menu */
        >ul{
            margin-left: 10px;
            li{}
        }

        a {
            padding: 10px 0;
            display: block;
            color: $dark;
            border-bottom: 1px solid rgba(0,0,0,.1);
            &:hover{
                color: lighten($dark, 25%);
            }
        }

        /* Current menu items */
        &.current a {
            font-weight: bold;
        }
    }

    /* How should the button behave on large screens */
    &.active{
        margin-left: -$sidebarWidth;
        .custom-menu-toggle{
            margin-right: -50px;
        }
    }

    /* How should the button behave on small screens */
    @include media-breakpoint-down(md){
        margin-left: -$sidebarWidth;
        &.active {
            margin-left: 0;
            .custom-menu-toggle{
                margin-right: 15px !important;
            }
        }
        .custom-menu-toggle{
            margin-right: -50px !important;
            top: 10px !important;
        }
    }

    .custom-menu-toggle{
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 0;
        margin-right: -20px;
        z-index: 1;
        @include transition(.3s);
        .btn{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            &.btn-primary{
                background: $darkGreen;
                border-color: $darkGreen;
                &:hover, &:focus{
                    background: $darkGreen !important;
                    border-color: $darkGreen !important;
                }
            }

            span{
                @include media-breakpoint-down(md){
                    display: none;
                }
            }
        }

    }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
    }

    .collapse {
        display: block;
        max-height: 0px;
        overflow: hidden;
        transition: max-height .5s cubic-bezier(0, 1, 0, 1);
        &.show {
            max-height: 130em;
            transition: max-height .5s ease-in-out;
        }
    }
}
