<template>
	<div class="layout-navbars-container">
		<BreadcrumbIndex />
		<TagsView v-if="setShowTagsView" />
	</div>
</template>

<script lang="ts">
import { computed } from 'vue';
import { useThemeConfigStateStore } from '@/stores/themeConfig';
import BreadcrumbIndex from '@/layout/navBars/breadcrumb/index.vue';
import TagsView from '@/layout/navBars/tagsView/tagsView.vue';
import { useRoute } from 'vue-router';

export default {
	name: 'layoutNavBars',
	components: { BreadcrumbIndex, TagsView },
	setup() {
		const route = useRoute();
		const theme = useThemeConfigStateStore();
		// 是否显示 tagsView
		const setShowTagsView = computed(() => {
			let { layout, isTagsview } = theme.themeConfig;
			return layout !== 'classic' && isTagsview && route.meta.isIframe;
		});
		return {
			setShowTagsView,
		};
	},
};
</script>

<style scoped lang="scss">
.layout-navbars-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
</style>
