<template>
    <aside>

        <!-- Off-canvas menu for mobile -->
        <div class="lg:hidden">

            <!-- Off-canvas / background overlay -->
            <transition
                enter-active-class="transition-opacity ease-linear duration-300"
                enter-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="transition-opacity ease-linear duration-300"
                leave-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div class="fixed inset-0 z-40" v-show="isOpen">
                    <div class="absolute inset-0 bg-gray-600 opacity-75" @click="close" tabindex="-1"></div>
                </div>
            </transition>

            <transition
                enter-active-class="transition ease-in-out duration-300 transform"
                enter-class="-translate-x-full"
                enter-to-class="translate-x-0"
                leave-active-class="transition ease-in-out duration-300 transform"
                leave-class="translate-x-0"
                leave-to-class="-translate-x-full"
            >
                <div class="fixed inset-0 flex z-40" v-show="isOpen">

                    <!-- Off-canvas -->
                    <div class="relative flex-1 flex flex-col max-w-xs w-full border-r border-gray-200 bg-white">

                        <!-- Off-canvas / toggle -->
                        <div class="absolute top-0 right-0 -mr-14 p-1">
                            <button
                                class="flex items-center justify-center h-12 w-12 rounded-full bg-gray-400 focus:outline-none focus:bg-gray-600"
                                @click="close"
                                type="button"
                                aria-label="Close sidebar"
                            >
                                <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M6 18L18 6M6 6l12 12"
                                    />
                                </svg>
                            </button>
                        </div>

                        <!-- Off-canvas / header -->
                        <div class="flex-shrink-0 flex items-center p-4">
                            <slot name="sidebar-header"></slot>
                        </div>

                        <!-- Off-canvas / menu -->
                        <div class="mt-2 flex-1 h-0 overflow-y-auto">
                            <slot name="sidebar-menu"></slot>
                        </div>

                        <!-- Off-canvas / footer -->
                        <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
                            <slot name="sidebar-footer"></slot>
                        </div>
                    </div>

                    <!-- Dummy element to force sidebar to shrink to fit close icon -->
                    <div class="flex-shrink-0 w-14 md:w-7/12" @click="close"></div>
                </div>
            </transition>
        </div>

        <!-- Static sidebar for desktop -->
        <div class="hidden h-screen lg:flex lg:flex-shrink-0">
            <div class="flex flex-col w-64 border-r border-gray-200 bg-white">

                <!-- Sidebar / header -->
                <div class="flex items-center flex-shrink-0 p-4 pb-3">
                    <slot name="sidebar-header"></slot>
                </div>

                <!-- Sidebar / menu -->
                <div class="h-0 mt-2 flex-1 flex flex-col overflow-y-auto">
                    <slot name="sidebar-menu"></slot>
                </div>

                <!-- Sidebar / footer -->
                <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
                    <slot name="sidebar-footer"></slot>
                </div>

            </div>
        </div>

    </aside>
</template>

<script>
export default {
    data() {
        return {
            isOpen : false
        }
    },
    methods : {
        open() {
            this.isOpen = true;
        },
        close() {
            this.isOpen = false;
        }
    },
    watch : {
        isOpen : {
            immediate : true,
            handler(isOpen) {
                if (isOpen) {
                    document.body.style.setProperty('overflow', 'hidden')
                } else {
                    document.body.style.removeProperty('overflow')
                }
            }
        }
    },
    mounted() {
        window.EventBus.$on('openSidebar', () => this.open());
        window.EventBus.$on('closeSidebar', () => this.close());
    }
}
</script>
