<!--
 * @Description: header component
 * @Author: ZCY
 * @Date: 2022年12月1日09:42:06
-->
<script lang="ts" setup>
import type { Ref } from 'vue';
import { inject, useSlots } from 'vue';
import { configKey } from '../../utils/injectedKeys';
import type { LayoutConfig } from './types';
import NavBar from './navbar/index.vue';
import TagView from './tagview/index.vue';

const slots = useSlots();
const { config } = inject<{ config: Ref<LayoutConfig> }>(configKey)!;
</script>

<template>
  <header class="app-main-header">
    <NavBar v-if="config.isNavbar">
      <template v-for="(item, key) in slots" :key="key" #[key]="slotProps">
        <slot :name="key" v-bind="slotProps" />
      </template>
    </NavBar>
    <TagView v-if="config.isTagView && config.layout !== 'classic'" />
  </header>
</template>

<style scoped>
.app-main-header{align-items:center;display:flex;flex-direction:column;justify-content:center;position:absolute;right:0;text-align:center;top:0;transition:all .2s ease 0s;width:100%;z-index:500}
</style>
