<template>
    <div class="j-sidenav-button-container"
         :class="classes"
         @click="toggle">
        <div class="j-sidenav-button-bar1"></div>
        <div class="j-sidenav-button-bar2"></div>
        <div class="j-sidenav-button-bar3"></div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            default: false
        }
    },
    computed: {
        classes() {
            return [
                this.value ? 'j-sidenav-button-change' : ''
            ];
        }
    },
    methods: {
        toggle() {
            this.$emit('input', !this.value);
        }
    }
}
</script>