Files
onboard/resources/js/Layouts/Components/AppHeader.vue
2026-03-25 17:37:32 +09:00

46 lines
1.3 KiB
Vue

<script setup>
import { NFlex, NSpace, NDivider, NButton } from 'naive-ui'
import ReportSelectDate from "../../Components/ReportSelectDate.vue";
import AppUserButton from "./AppUserButton.vue";
import {Link} from "@inertiajs/vue3";
import AppHeaderRole from "./AppHeaderRole.vue";
import {computed, useSlots} from "vue";
const slots = useSlots()
const hasHeaderExtra = computed(() => {
if (!slots.headerExtra) return false
const slotContent = slots.headerExtra()
return slotContent && slotContent.length > 0 && slotContent[0].children.length > 0
})
const hasHeaderSuffix = computed(() => {
if (!slots.headerExtra) return false
const slotContent = slots.headerExtra()
return slotContent && slotContent.length > 0 && slotContent[0].children.length > 0
})
</script>
<template>
<div class="grid grid-cols-[auto_1fr_auto] px-4 w-full h-full">
<NSpace align="center">
<NButton :tag="Link" text href="/">
Метрика
</NButton>
<NDivider v-if="hasHeaderExtra" vertical />
<slot name="headerExtra" />
</NSpace>
<div></div>
<NFlex align="center" justify="end">
<slot name="headerSuffix" />
<NDivider v-if="hasHeaderSuffix" vertical />
<AppUserButton />
</NFlex>
</div>
</template>
<style scoped>
</style>