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";
	import { ISidebarItem } from "~/models/sidebarEntry";
	const { useToken } = theme;
	const { token } = useToken();

	const col = token.value.colorText;

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

	const collapsed = ref<boolean>(true);

	const sideTriggerVal = computed(() => {
		let th = collapsed.value ? " collapsed" : "";
		return `sider-trigger${th}`;
	});

	// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
	// provide("sidebar-items", rd.data)

	provide("collapsed", collapsed);
	const loaded = inject<Ref<boolean>>("loaded");
	let darko = inject("dark");
</script>
<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">
					<a-typography-title class="siteTitle"> Rockfic </a-typography-title>
					<div class="stat-block">
						<div>
							<a-typography-text> Band fiction that rocks </a-typography-text>
							<a-typography-text type="secondary">
								With {{ totals.stories }} stories by
								{{ totals.authors }} authors
							</a-typography-text>
						</div>
					</div>
					<!-- <client-only> -->
					<navbar />

					<!-- </client-only> -->
				</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',
			}"
			: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 #fff',
			}"
		>
			<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> -->
</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>