Sidebar slide out + background shadow effect

<div class="sidebar">
<div class="sidebar_con" :class="{showbar: showbar}"></div>

        <div class="sidebar_mask" v-show="showbar" @click="hidebar"></div>

</div>

.sidebar{
.sidebar_con{
position:fixed;
top:0;
left: px2rem(-600px);
transform: translateZ(0);
width:px2rem(600px);
z-index:1002;
background:#fff;
height:100%;
overflow:auto;
transition: all .3s ease;
&.showbar{
 transform: translateX(px2rem(600px));
}

        }

.sidebar_mask{
position:fixed;
width:100%;
margin:0 auto;
top:0;
left:0;
bottom:0;
right:0;
z-index:1001;
background:rgba(0, 0, 0, .7);
}

}