next/layouts/default.vue

<script setup lang="ts">
	import { theme } from "ant-design-vue";
	import navbar from "~/components/layouts/navbar.vue";
	import cfooter from "~/components/layouts/footer.vue";
	import icon from "~/components/icon.vue";
	const { useToken } = theme;
	const { token } = useToken();

	const { data: totals }: any = await useApiFetch("/totals");

	let darko = inject("dark");
</script>
<template>
	<a-layout style="padding: 10px; background: unset !important">
		<a-layout-header class="alayhead">
			<div style="display: flex; align-items: center">
				<a-typography-title
					class="siteTitle"
					:style="{
						color: '#ff2883',
						fontFamily: 'jandles',
						fontSize: '5em',
						margin: 0,
					}"
				>
					Rockfic
				</a-typography-title>
				<div style="display: flex; flex-direction: column">
					<a-typography-text> Band fiction that rocks </a-typography-text>
					<br />
					<a-typography-text type="secondary">
						With {{ totals.stories }} stories by {{ totals.authors }} authors
					</a-typography-text>
				</div>
				<navbar />
			</div>
		</a-layout-header>
		<a-layout-content>
			<slot />
			<a-float-button
				type="primary"
				:style="{ height: '50px', width: '50px' }"
				tooltip="Post a new Story"
			>
				<template #icon>
					<icon istyle="regular" name="file-plus" />
				</template>
			</a-float-button>
		</a-layout-content>
		<a-layout-footer>
			<cfooter />
		</a-layout-footer>
	</a-layout>
</template>

<style scoped>
	.siteTitle {
		min-width: max-content;
		font-weight: normal;
		/* float: left; */
	}

	.alayhead {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background: inherit !important;  */
		height: unset !important;
		margin-bottom: 1.5em;
	}

	.alayhead > div > * + * {
		margin-left: 1.2em;
	}
</style>