<template>
    <div class="drawer" :class="{'drawer-open': on }" v-show="on">
        <div class="drawer-main" v-el:main>
            <slot></slot>
        </div>
    </div>
</template>
<script>
module.exports = {
    props: {
        on: Boolean
    }
};
</script>
<style>
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.drawer-main {
    position: absolute;
    top: 0;
    right: 0%;
    bottom: 0;
    min-width: 80%;
    max-width: 100%;
    background-color: #fff;
    transition: all 0.3s 0.2s;
}
</style>