feat: create default app layout

layouts/default.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+	import {theme} from "ant-design-vue"
+	import navbar from "~/components/layouts/navbar.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: token.colorPrimary, 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>
+</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>