<template>
    <div>
        <div :id="id"
             class="sidenav">
            <div class="px-2"
                 style="display: none">
                <slot></slot>
            </div>
        </div>
        <j-sidenav-overlay :nav-selector="`#${id}`"
                           :direction="direction"
                           v-model="value"></j-sidenav-overlay>
    </div>
</template>

<script>
import sidenavOverlay from './j-sidenav-overlay.vue';
import { guid } from "libj-core";
export default {
    components: {
        'j-sidenav-overlay': sidenavOverlay
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        direction: {
            default: 'ltr'
        }
    },
    data() {
        return {
            id: guid.newId()
        };
    }
}
</script>