60 lines
2.0 KiB
Vue
60 lines
2.0 KiB
Vue
<script setup>
|
|
import { NFlex, NEl, NIcon, NText, NDivider } from 'naive-ui'
|
|
import { TbHeartRateMonitor } from 'vue-icons-plus/tb'
|
|
import AppUserButton from "./AppUserButton.vue"
|
|
import { Link } from "@inertiajs/vue3"
|
|
import { computed, useSlots } from "vue"
|
|
import { useThemeVars } from "naive-ui"
|
|
|
|
const slots = useSlots()
|
|
const themeVars = useThemeVars()
|
|
|
|
const hasHeaderExtra = computed(() => {
|
|
if (!slots.headerExtra) return false
|
|
const content = slots.headerExtra()
|
|
return content?.length > 0 && content[0].children?.length > 0
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-[auto_1fr_auto] items-center px-4 w-full h-full">
|
|
|
|
<!-- Лого -->
|
|
<NFlex align="center" :size="10" :wrap="false">
|
|
<component
|
|
:is="Link"
|
|
href="/"
|
|
style="text-decoration: none; display: flex; align-items: center; gap: 8px;"
|
|
>
|
|
<NEl
|
|
style="
|
|
width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: color-mix(in srgb, var(--primary-color) 20%, transparent);
|
|
"
|
|
>
|
|
<NIcon size="16" style="color: var(--primary-color);"><TbHeartRateMonitor /></NIcon>
|
|
</NEl>
|
|
<NText style="font-size: 14px;">
|
|
Метрика
|
|
</NText>
|
|
</component>
|
|
|
|
<template v-if="hasHeaderExtra">
|
|
<NDivider vertical style="height: 18px;" />
|
|
<slot name="headerExtra" />
|
|
</template>
|
|
</NFlex>
|
|
|
|
<!-- Центр (пусто или слот) -->
|
|
<div></div>
|
|
|
|
<!-- Пользователь -->
|
|
<NFlex align="center" justify="end" :wrap="false">
|
|
<slot name="headerSuffix" />
|
|
<AppUserButton />
|
|
</NFlex>
|
|
|
|
</div>
|
|
</template>
|