adrema/resources/js/components/SidebarHeader.vue

<template>
    <div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
        <div class="flex items-center">
            <span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
            <a
                v-for="(link, index) in links.filter((link) => link.icon === undefined)"
                :key="index"
                @click.prevent="$emit(link.event)"
                href="#"
                class="btn label btn-primary-light"
            >
                <span v-if="link.label" v-text="link.label"></span>
                <svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
            </a>
            <a
                v-for="(link, index) in links.filter((link) => link.icon !== undefined)"
                :key="index"
                :href="link.href"
                class="btn label icon btn-primary-light ml-1"
            >
                <span v-if="link.label" v-text="link.label"></span>
                <svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
            </a>
        </div>
        <div class="flex ml-4">
            <a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
                <svg-sprite class="w-3 h-3" src="close"></svg-sprite>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        links: {
            default: function () {
                return [];
            },
        },
        title: {
            default: function () {
                return '';
            },
        },
    },
};
</script>