<template>
    <div class="relative z-30 flex-shrink-0 flex h-16 bg-white shadow">

        <button
            class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden"
            @click.prevent="openSidebar"
        >
            <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
            </svg>
        </button>

        <div class="flex-1 px-4 flex justify-between">
            <div class="flex-1 flex">
                <div class="w-full flex md:ml-0 items-center">
                    <slot name="header-left"></slot>
                </div>
            </div>
            <div class="ml-4 flex items-center md:ml-6">
                <slot name="header-right"></slot>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    methods : {
        openSidebar() {
            window.EventBus.$emit('openSidebar');
        },
    }
}
</script>
