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 sidebarThing from "~/components/layouts/sidebar.vue";
	import icon from "~/components/icon.vue";

	const { useToken } = theme;
	const { token } = useToken();

	const col = token.value.colorText;

	const {
		data: { value: totals },
	} = await useApiFetch<{ stories: number; authors: number }>("/totals");

	const collapsed = ref<boolean>(true);

	collapsed.value = true;

	const sideTriggerVal = computed(() => {
		let th = collapsed.value ? " collapsed" : "";
		return `sider-trigger${th}`;
	});
	const darkBool = inject<boolean>("dark");
	// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
	// provide("sidebar-items", rd.data)

	provide("collapsed", collapsed);
	let darko = inject("dark");
</script>
<template>
	<a-config-provider
		:theme="{
			token: {
				colorPrimary: '#f14668',
				colorSuccess: '#2be396',
				colorWarning: '#face14',
				colorInfo: '#15c6e3',
				colorTextBase: darkBool ? '#fff' : '#101010',
			},
			algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
		}"
	>
		<template #renderEmpty>
			<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
			<i> Nothing here but crickets. </i>
		</template>
		<a-layout class="ylayout" has-sider>
			<a-layout class="mlayout">
				<a-layout-header class="alayhead">
					<div style="display: flex; align-items: center; flex-wrap: wrap">
						<div class="siteTitle">Rockfic</div>
						<div class="stat-block">
							<div>
								<a-typography-text> Band fiction that rocks </a-typography-text>
								<a-typography-text type="secondary"> With {{ totals?.stories || 0 }} stories by {{ totals?.authors || 0 }} authors </a-typography-text>
							</div>
						</div>
						<navbar />
					</div>
				</a-layout-header>
				<a-layout-content style="flex-grow: 1">
					<slot />
				</a-layout-content>
				<a-layout-footer style="bottom: 100%">
					<cfooter />
				</a-layout-footer>
			</a-layout>
			<a-layout-sider
				:zero-width-trigger-style="{
					background: '#e92662',
					padding: '1.2em',
					position: 'fixed',
					right: 0,
					borderRadius: '15%',
					color: 'white',
					border: '2.4px solid #fffFFF80',
					top: '75vh',
					'z-index': 99999999,
				}"
				:theme="darko ? 'dark' : 'light'"
				:breakpoint="'lg'"
				v-model:collapsed="collapsed"
				:collapsible="true"
				:collapsed-width="0"
				:style="{
					color: col,
					height: '100%',
					position: 'fixed',
					right: '0px',
					borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
				}"
			>
				<sidebar-thing />
				<template #trigger>
					<div class="outerst" @click="() => (collapsed = !collapsed)">
						<div :class="sideTriggerVal">
							<icon istyle="solid" name="chevron-right" :size="30" />
						</div>
					</div>
				</template>
			</a-layout-sider>
		</a-layout>
		<!-- <div class="mlayout">
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		<a-skeleton/>
		</div> -->
	</a-config-provider>
</template>

<style scoped>
	.stat-block {
		display: inline-block;
	}

	.ylayout {
		height: 100%;
	}

	.sideWrap {
		height: 100vh;
		right: -1rem;
		width: inherit;
		/* display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding-bottom: 2em;
		overflow-x: "clip";
		height: "100vh";
		width: 80px !important;
		top: 0;
		bottom: 0;
		border-left: 2px solid #ffcbe5; */
	}

	.sideWrap > * {
		position: fixed;
		right: 50;
	}

	.stat-block > div {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.mlayout,
	footer {
		padding: 1.5em;
	}

	@media (min-width: 760px) {
		.stat-block > div {
		}

		.mlayout {
			padding: 3em;
		}

		.mlayout > footer {
			padding: 0;
			/* padding-right: calc(4em + 90px); */
		}

		.mlayout {
			/* padding-right: calc(4em + 90px); */
			background: unset !important;
		}

		.alayhead {
			display: inline-block;
			flex-direction: row;
			align-items: center;
			justify-content: start !important;
			/* background: inherit !important;  */
			height: unset !important;
			margin-bottom: 1.5em;
			width: 100%;
			/* margin-right: auto; */
		}

		.alayhead > div {
			width: 100% !important;
		}

		.siteTitle {
			display: inline-block;
			min-width: unset !important;
		}

		.alayhead > div {
			flex-direction: row !important;
		}
	}

	.siteTitle {
		/* min-width: max-content; */
		font-weight: normal;
		color: #f14668 !important;
		font-family: "jandles";
		font-size: 5em;
		margin: 0;
		display: block;
		min-width: 100%;
		text-align: center;
		/* float: left; */
	}

	.sider-trigger {
		position: relative;
		/* display: flex; */
		/* padding-left: 4.8em;
	padding-right: 1.8em; */
	}

	.sider-trigger.collapsed {
		left: 0;
	}

	.sider-trigger.collapsed i {
		/* transform: rotate3d(0, 1, 0, 180deg); */
		position: relative;
		transform: rotate(540deg);
	}

	.sider-trigger i,
	.sider-trigger.collapsed i {
		transition: all 0.75s ease-in-out;
	}

	.alayhead {
		display: flex;
		flex-direction: column;
		align-items: baseline;

		justify-content: center;
		/* background: inherit !important;  */
		height: unset !important;
		margin-bottom: 1.5em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		width: auto;
	}

	.alayhead > div {
		flex-direction: column;
		align-self: center;
	}

	.alayhead > div > * + * {
		margin-left: 1.2em;
	}
</style>
<style>
	body[data-theme="dark"] .ant-layout > *,
	body[data-theme="dark"] .ant-layout {
		background: #141414 !important;
	}

	.ant-layout-sider-trigger {
		background: inherit !important;
	}

	.ant-menu-light {
		background: inherit !important;
	}

	.ant-layout-sider-children {
		/* display: flex; */
		flex-direction: column;
	}
</style>