사이드바 만들기 꿀팁

 .side_bar_box {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            z-index: 999;
            position: fixed;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.5);
            -webkit-tap-highlight-color: transparent;
            transform: translate(-100%);
            transition: transform 0.2s;
        }

transform: translate(-100%) 의미 : left에서 완전히 사라진다.

JS

 $(function(){
            $('.css-cnrrzv').click(function(){
                //$('.side_bar_box').removeClass('none');
                //$('.side_bar').css('left', '0');
                $('.side_bar_box').css('transform', 'translateX(0px)');
            });
        });

        $('.side_bar_box').click(function(e){
            if( !$('.side_bar_box').has(e.target).length ) {
                $('.side_bar_box').css('transform', 'translateX(-100%)');
            }
        });

translateX(0px)로 해주면 사이드바가 나타나게 된다!