.pro-affixnav-collapse-transition{
    & > .side {
        position: relative;
        padding: 0px;
        margin: 0px;
        outline: 0px;
        transition: width 300ms ease-out;
        box-sizing: content-box;
        .affixnav-trigger {
            position:absolute;
            cursor: pointer;
            &.is-top {
                top: 0px;
            }
            &.is-center {
                top: 50%;
                transform: translateY(-50%);
            }
            &.is-bottom {
                bottom: 0px;
            }
        }

        &.is-left {
              float: left;
             .affixnav-trigger{
                right: 0px;
                transform: translateX(100%);
             } 
        }
        &.is-right {
            float: right;
            .affixnav-trigger{
                left: 0px;
                transform: translateX(-100%);
             } 
        }
        &.is-collapsed{
            width: 0px !important;
            .pro-affix {
                 width: 0px !important;
            }
            .side-content {
                width: 0px !important;
                overflow: hidden;
            }
        }
        .side-content{
            transition: width 300ms ease-out;
        }
    }

    & > .content{
      overflow: hidden;
    }
}