<template>
    <div>
        <Drawer v-bind="$attrs" @openMenu="openMenu" @closeMenu="closeMenu">
            <slot></slot>
        </Drawer>
    </div>
</template>

<script>
import Drawer from './DrawerBase'
export default {
    name: 'RevealDrawer',
    components: {
        Drawer
    },
    props: ['contentWrapperId', 'appWrapperId'],
    methods: {
        openMenu () {
            this.$emit('openMenu')
            let width = this.$attrs.width ? this.$attrs.width + 'px' : '300px'
            if (this.$attrs.right) {
                document.querySelector(`#${this.contentWrapperId}`).style.transform = `translate3d(-${width}, 0px, 0px )`
            } else {
                document.querySelector(`#${this.contentWrapperId}`).style.transform = `translate3d(${width}, 0px, 0px )`
            }
            document.querySelector(`#${this.contentWrapperId}`).style.position = 'relative'
            document.querySelector(`#${this.contentWrapperId}`).style.transition = 'all 0.5s ease 0s'
        },
        closeMenu () {
            this.$emit('closeMenu')
            this.$events.emit(`resetMenu|${this.$attrs.associatedNavId}`)
            document.querySelector(`#${this.contentWrapperId}`).style.transition = 'all 0.5s ease 0s'
            document.querySelector(`#${this.contentWrapperId}`).style.transform = ''
            document.querySelector(`#${this.contentWrapperId}`).style.position = ''
        }
    }
}
</script>
